Мы разрабатываем приложение Vue.js на основе Vue CLI 3 с Vue Router и Webpack.Маршруты загружаются с отложенной загрузкой , а имена файлов чанков содержат хэш для очистки кэша.В целом все работает нормально.
Однако при развертывании возникает проблема.Шаги для воспроизведения следующие:
- Пользователь открывает приложение (предположим, маршрут "/"), таким образом, загружается основной файл чанка.
- Мы что-то меняем в приложении иразвернуть новую версию.
- Старые файлы чанков удаляются
- Добавляются новые файлы чанков (т. Е. Меняются хэши в именах файлов чанков)
- Пользователь нажимает ссылку надругой маршрут (например, "/ foo")
- Произошла ошибка при попытке приложения загрузить файл чанка, который был переименован:
Error: "Loading CSS chunk foo failed.
(/assets/css/foo.abc123.css)" (это может быть CSS или JavaScript)
Каков наилучший способ избежать подобных ошибок?
Один из подходов, который должен работать, - это просто сохранить старые файлы чанков иудалите их позже.Это, однако, усложняет развертывание новых версий, так как вам необходимо отслеживать старые версии и всегда также развертывать старые файлы чанков с новой версией.
Другой (наивный) подходпросто перезагрузить, как только обнаружится такая ошибка (например, Vue Lazy Routes и загрузка чанка не удалась ).Это несколько работает, но перезагружает старый маршрут , а не новый .Но, по крайней мере, это гарантирует, что последовательные изменения маршрута снова будут работать.
Есть еще идеи?Может быть, в веб-пакете есть что-то, что могло бы это исправить?