Как бороться с обновленным чанком на сервере?

Question

У нас есть приложение React с разделением кода с использованием React.lazy и Suspend. Каждый вторник мы развертываем новую версию, поэтому наши чанки тоже меняются.

Проблема, с которой мы сталкиваемся сейчас, заключается в том, что если наш пользователь не обновил после развертывания, его старый main.js все еще указывает на старые файлы чанков со старыми хэшами. И он потерпит крах, когда они попытаются загрузить старые файлы чанка.

Мы знаем, что можем предварительно выбирать маршруты, когда наше приложение загружено, но есть много маршрутов, которые нужно предварительно выбрать (около 20). Это может повлиять на производительность нашей домашней страницы, потому что у нас есть несколько вызовов API на домашней странице.

Есть ли лучшие способы справиться с этим?

Большое спасибо заранее.

Answer 1

• Используйте [hash] заполнитель в конфигурации вывода Webpack, например, filename: '[hash]/[name].js'.Таким образом, каждая компиляция будет давать новый набор имен файлов.
• Убедитесь, что страница, которая ссылается на эти чанки (будь то сгенерированные с помощью webpack-html-plugin или чего-то еще), всегда подается свежей, никогда из кеша, черезЗаголовки Cache-Control или другие подобные методы.

Таким образом, очень упрямые клиенты (игнорирующие заголовки управления кэшем), скорее всего, будут использовать старую версию вашего кода, но как только они обновятся (чтобы получить новую страницу HTML), им также будет гарантирован весь новый JavaScript, так как URL изменился.

Answer 2

Мы решили предварительно загрузить каждый маршрут в фоновом режиме, чтобы нашим клиентам не нужно было лениво загружать другие блоки в более поздний момент времени.

Answer 3

Что мешает вам хранить несколько версий на вашем сервере?Допустим, v1.commons.js в настоящее время развернуто.Теперь, когда вы создаете новую версию, создается v2.commons.js, и оба файла обслуживаются сервером.Старые клиенты по-прежнему будут работать со старой версией, но в зависимости от настроек кэширования (времени истечения срока действия страницы) они вскоре перейдут на новую версию.Затем вы можете удалить старую версию с вашего сервера.