使用 Webpack 进行新部署后处理丢失的动态块 [英] Handle missing dynamic chunks after new deployment with Webpack

问题描述

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

I have an AngularJs (1.7) SPA with Webpack (4.x).

这是我们创建块名的方式:

This is how we create chunknames:

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

延迟加载是在 ui-router 的状态定义中完成的，基本上是这样的:

The lazyloading is done in the state definitions in ui-router basically like this:

  $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] 已更改).

After a deployment due changes to a module in a "dynamic" chunk - the filename will change of this chunk ([contenthash] has changed).

当登录用户(在上次部署之前加载所有捆绑资产)现在尝试使用新块打开路由 - 块不存在(404)并且它将失败与:

When a logged in user (where all bundled assets are loaded before the last deployment) now tries to open a route with the new chunk - the chunk is not there (404) and it will fail with:

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))

有没有通用的方法来规避/处理这个问题?

Is there a common way to circumvent/deal with this?

也许更一般:如何检测捆绑的网络应用程序的更改?是否有触发重新加载的常用方法?是否总是需要手动刷新?

Maybe more in general: How can changes to a bundled web app be detected? Is there a common way to trigger a reload? Is a manual refresh always neccessary?

推荐答案

我认为有几种方法可以规避这一点，因为当前上下文中的 javascript 不知道最新生成的内容的新哈希构建你可以尝试:

I think there are a few ways to circumvent this, since the javascript in the current context isn't aware of the new hash of the content generated by the latest build you could try:

1.) 您可以尝试在散列文件上设置 http 重定向:https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections浏览器将请求旧文件，服务器可以指向新文件而不是返回 404.如果您的所有文件都遵循约定并且一次只存储一个文件，例如:component.hash.js 那么这应该很容易.

1.) You could try setting up an http redirect on the hashed files: https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections The browser will request the old file and the server can point to the new file instead of returning 404. If all of your files follow a convention and only store one of the file at a time ex: component.hash.js then this should be pretty easy.

2.) hacky 客户端方法将在 try catch 中处理转换拒绝并重新加载页面，而无需缓存来获取新资产.https://developer.mozilla.org/en-US/文档/Web/API/位置/重新加载

2.) A hacky client approach would be handling the transition-rejection in a try catch and reload the page, without the cache to get the new assets. https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

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

There's always more than one approach, but this is what I could think of to solve the issue.

这篇关于使用 Webpack 进行新部署后处理丢失的动态块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！