使用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?

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

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重定向:

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.)骇客的客户端方法将在try catch中处理转换拒绝并重新加载页面，而无需使用缓存来获取新资产. https://developer.mozilla.org/zh-CN/docs/Web/API/Location/reload

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屋！