如何处理服务器上更新的Webpack块？

Question

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

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

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

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

非常感谢。

Answer 1

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

Answer 2

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

这样，非常顽固的客户端（不理会缓存控制标头）将很可能会使用其旧版本的代码，但是一旦刷新（获取新的HTML页面），就可以保证它们由于网址已更改，因此也使用了新的JavaScript。

Answer 3

我们决定在后台预先加载每条路由，这样我们的客户就不必在以后的时间延迟加载其他数据块了。