Webpack 块过时时自动重新加载页面答案

【问题标题】：Auto-reload page when Webpack chunks are outdatedWebpack 块过时时自动重新加载页面
【发布时间】：2018-04-06 12:59:01
【问题描述】：

我有一个与 Webpack 捆绑在一起的应用程序。

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

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

在将新更改部署到生产环境后，捆绑和块文件被替换（因此，旧的被删除）。

如果用户打开应用并尝试导航到应该加载过时块的页面，则部分应用会崩溃。

问题：有没有办法检测加载块失败并自动重新加载屏幕或显示适当的消息？

建议采取什么样的策略？

谢谢。

【问题讨论】：

标签： webpack lazy-loading

【解决方案1】：

通常无法加载部分块是由于服务器问题或网络问题，或浏览器问题......所以如果存在某种类型的不兼容（在特定浏览器或浏览器插件中），值得交叉检查，服务器性能差等。也就是说，有一个webpack plugin to auto retry loading chunks，

如果您特别想从外部/不可靠的来源延迟加载组件，您也可以使用类似的方法：

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

请参阅full gist here。

【讨论】：

【解决方案2】：

我会使用runtime chunks，这样每个条目块就不会嵌入运行时。这应该转化为能够在生产中“即插即用”块。

【讨论】：