当Webpack代码块过时时自动重新加载页面

Question

我有一个使用Webpack打包的应用程序。

它有一个主要的捆绑文件，其余的代码按屏幕拆分成块。主要的捆绑和块都使用哈希作为文件名的一部分生成。

...
filename: '[name]-[hash].js',
chunkFilename: '[id].[name]-[hash].js'
...

在将新更改部署到生产后，bundle和chunk文件会被替换(也就是说，旧的文件被删除)。

如果用户打开应用并尝试导航到加载过时chunk的页面，则应用程序的一部分崩溃。

问题是：有没有一种方法可以检测到加载chunk失败并自动重新加载屏幕或显示适当的消息？

什么样的策略是可取的？

谢谢。

- faboulaws

Answer 1

我会使用运行时代码块，这样每个入口代码块都不会嵌入运行时。这应该可以使生产环境中的代码块“即插即用”。

- TropicalRaisel

Answer 2

通常，加载块的一部分失败要么是由于服务器问题或网络问题，要么是浏览器问题...因此值得交叉检查是否存在某些类型的不兼容性（在特定浏览器或浏览器插件中），服务器性能差等。话虽如此，有一个webpack插件可以自动重试加载块。

如果您特别想从外部/不可靠的源加载组件，则还可以使用类似以下内容的东西：

export default function componentLoader(lazyComponent, attemptsLeft) {
  return new Promise((resolve, reject) => {
    lazyComponent()
      .then(resolve)
      .catch((error) => {
        // let us retry after 1500 ms
        setTimeout(() => {
          if (attemptsLeft === 1) {
            reject(error);
            return;
          }
          componentLoader(lazyComponent, attemptsLeft - 1).then(resolve, reject);
        }, 1500);
      });
  });
}

点击这里查看完整的Gist。

- Chibueze Opata