使用 Webpack 进行新部署后处理丢失的动态块

Question

我有一个带有 Webpack (4.x) 的 AngularJs (1.7) SPA。

这就是我们创建块名的方式：

  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.) 一个 hacky 客户端方法是在 try catch 中处理转换拒绝并重新加载页面，而无需缓存来获取新资产。 https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

总是有不止一种方法，但这是我能想到的解决问题的方法。