如何处理服务器上更新的 webpack 块？答案

【问题标题】：How to deal with webpack chunk updated on server?如何处理服务器上更新的 webpack 块？
【发布时间】：2019-04-23 06:07:29
【问题描述】：

我们有一个使用 React.lazy 和 Suspend 进行代码拆分的 React 应用程序。每个星期二我们都会部署一个新版本，因此我们的块也会发生变化。

我们现在遇到的问题是，如果我们的用户在我们部署后没有刷新，他们的旧main.js 仍然指向具有旧哈希值的旧块文件。当他们尝试加载旧的块文件时，它会崩溃。

我们知道我们可以在加载应用程序时预取路由，但是有很多路由需要预取（大约 20 个）。这可能会影响我们的主页性能，因为我们在主页上有一些 API 调用。

有没有更好的方法来解决这个问题？

非常感谢。

【问题讨论】：

我们说的是 Webpack 在块文件名中生成的哈希？你能展示一下你的 Webpack 配置的相关部分吗？

标签： javascript reactjs webpack

【解决方案1】：

是什么让您无法在服务器上保留多个版本？假设v1.commons.js 当前已部署。现在，当您构建一个新版本时，v2.commons.js 被创建，并且这两个文件都由服务器提供。旧客户端仍然可以使用旧版本，但根据您的缓存设置（页面到期时间），它们将很快迁移到新版本。然后您可以从服务器中删除旧版本。

【讨论】：

【解决方案2】：

Use the [hash] placeholder 在你的 Webpack 输出配置中，例如filename: '[hash]/[name].js'。这样，每次编译都会产生一组新的文件名。
确保引用这些块的页面（无论是使用 webpack-html-plugin 还是其他东西生成）始终是新鲜的，而不是通过 Cache-Control 标头或其他类似技术从缓存中提供。

这种方式非常顽固的客户（他们无视缓存控制标头）很可能会使用他们的旧版本代码，但是一旦他们刷新（获取新的 HTML 页面），他们就会得到保证新的 JavaScript 也是，因为 URL 已更改。

【讨论】：

【解决方案3】：

我们决定在后台预加载每条路由，这样我们的客户就不需要在以后延迟加载其他块。

【讨论】：