Как обрабатывать развертывания с разбиением кода Webpack?

Вот неожиданная проблема, с которой я столкнулся с разрывом кода Webpack в дикой природе. Представьте себе этот сценарий:

  1. Пользователь загружает приложение React с разделением кода Webpack и загружается несколько кусков пакета
  2. Развертывание происходит, и содержимое любых будущих кусков, которые пользователь может получать с сервера, обновляется (обратите внимание: предыдущие фрагменты удаляются на сервере во время развертывания)
  3. Пользователь нажимает на ссылку и загружает новый маршрут, который запускает больше пакетов для загрузки. Кроме того, эти новые куски несовместимы с теми, которые пользовательский браузер уже загрузил, и приложение ломается из-за ошибки времени выполнения

Как можно предотвратить этот сценарий?

Одним из возможных решений было бы поддерживать несколько версий наборов кусков, но мне интересно, есть ли более простое решение, используемое крупномасштабными приложениями.

Если используется preload-webpack-plugin, все куски могут быть предварительно загружены, но они останутся в кэше в течение короткого времени (5 минут в Chrome).

ОТВЕТЫ

Ответ 1

если имена файлов chunk хэшированы, не привязали бы старый маршрут к старому хеш-фрагменту (который предположительно все еще был бы доступен) и загрузили бы все в порядке?

Ответ 2

https://webpack.js.org/guides/caching/#output-filenames

Простой способ гарантировать, что браузер забирает измененные файлы, - это использование подстановок output.filename. Подменю [hash] можно использовать для включения хеша для конкретной сборки в имя файла, однако даже лучше использовать подменю [chunkhash], которая включает хэш-специфический хэш в имени файла.