Я использую стек реагирования/реакции-маршрутизатора/веб-пакета с динамической маршрутизацией между моими разными страницами приложения, что означает, что каждая страница загружается асинхронно спрос. Все работает отлично, но когда я развертываю новую версию, мои текущие активные пользователи, которые не получили весь Js-файл на всех страницах, будут застревать, как только попытаются перейти на другую страницу, которую они еще не посетили.Webpack + React router динамическая маршрутизация - как уловить необходимость загрузки исключение с require.ensure
Пример
позволяет сказать, что у меня есть код разделение приложения со следующим .js сгенерированных файлов и md5 (для очистки кэша):
main.123.js
profile.456.js
посещение пользователя моей главной страница и получает только main.123.js.
В то же время я развернуть новую версию с другой md5 (я сделал изменения как в profile.js и main.js)
main.789.js
profile.891.js
пользователь пытается перейти на страницу профиля, приложение пытается получить profile.456.js, но получить сообщение об ошибке, поскольку файл profile.js был заменен, и теперь у пользователя есть возможность узнать новое имя файла.
Я придумал 2 решения, но ни один из них на самом деле не решает проблему
РЕШЕНИЕ 1? Всегда держите 2 версии в наличии. но это скользкий склон, так как 2 варианта иногда будет недостаточно. i.e Пользователь может оставить свою вкладку открытой в течение нескольких дней, поэтому несколько развертываний могут состояться до тех пор, пока он не решит снова использовать приложение.
РЕШЕНИЕ 2? поймать исключение загрузки js и показать пользователю сообщение для перезагрузки приложения. Это решение может работать, но это раздражает UX, если вы спросите меня.
Неужели кто-нибудь испытал подобную проблему? Какие-либо предложения?
EDIT - РЕШЕНИЕ: Я решил пойти со вторым подходом (решение 2). Чтобы поймать ошибку загрузки, мне пришлось обновить свой webpack до webpack 2, поскольку реализация require.ensure не поддерживает catching, требующую исключения файлов. С webpack 2 я могу использовать System.import, который поддерживает обработку ошибок. Поэтому в основном то, что я сделал это:
динамическая загрузка мой компонент с помощью System.import:
function getMyComponent(nextState, cb, path) {
return System.import('components/myComponent').then(module => {
cb(null, module);
});
}
И поймать ошибку:
function getAsyncComponent(getComponent) {
return function (nextState, cb, path) {
getComponent(nextState, cb, path, store).catch(err => {
store.dispatch(notificationSend({message: <span>Uh oh.. Something went wrong.}));
cb(err);
});
}
}
<Route path="foo" getComponent={getAsyncComponent(getMyComponent)}/>