Обработка отсутствующих динамических блоков после нового развертывания с помощью Webpack

Question

У меня есть AngularJs (1.7) SPA с Webpack (4.x).

Вот как мы создаем имена чанков:

  config.output = {
    path: PATHS.build,
    publicPath: '/dist/',
    filename:  `[name]${isDev ? '' : '.[contenthash:8]'}.bundle.js`,
    chunkFilename: `chunks/[name]${isDev ? '' : '.[contenthash:8]'}.chunk.js`
  };

Ленивая загрузка выполняется в определениях состояний в ui-router, в основном так:

  $stateProvider
    .state('reports', {
      url: '/projects/:project_id/reports',
      lazyLoad: function($transition$) {
        const injector = $transition$.injector().get('$injector');
        return import(/* webpackChunkName: "admin.reports.module" */ './reports')
          .then(mod => {
            injector.loadNewModules([mod.default]);
          })
          .catch(err => {
            throw new Error('An error occured, ' + err);
          });
      }
    })

После развертывания из-за изменений модуля в «динамическом» чанке - имя файла будет изменено в этом чанке ([contenthash] изменился).

Когда вошедший в систему пользователь (куда загружаются все связанные ресурсы до последнего развертывания) теперь пытается открыть маршрут с новым чанком - чанка нет (404), и он завершится с ошибкой :

Transition Rejection($id: 4 type: 6, message: The transition errored, detail: Error: An error occured, Error: Loading chunk 14 failed.
(error: admin.reports.module.8fc31757.chunk.js))

Есть ли общий способ обойти / справиться с этим?

Может быть, в целом: как можно обнаружить изменения в комплекте веб-приложения? Есть ли общий способ вызвать перезагрузку? Всегда ли требуется ручное обновление?

Answer 1

Я думаю, что есть несколько способов обойти это, поскольку javascript в текущем контексте не знает о новом хеше контента, сгенерированного последней сборкой, которую вы можете попробовать:

1.) Вы можете попробовать настроить перенаправление http для хэшированных файлов: https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections Браузер запросит старый файл, и сервер может указать новый файл вместо возврата 404. Если все ваши файлы следуют соглашению и сохраняют только один файл за раз, например: component.hash.js, то это должно быть довольно легко .

2.) Подход хакерского клиента будет обрабатывать переход-отклонение в попытке поймать и перезагрузить страницу, без кеша для получения новых ресурсов. https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

Всегда есть несколько подходов, но я мог бы решить эту проблему.