Reactjs 如何部署具有代码拆分的JS应用程序，确保以前的应用程序版本不会'；不要打断

我有一个简单的PWA应用程序，用Webpack和React构建。 它在动态导入（例如，

React.lazy（（）=>import（'./SomeRoute'））

）上具有代码拆分设置，因此不同的路由获得不同的JS包，例如：

main.bundle.JS

，

SomeRoute.bundle.JS

现在想象一下这样的情况：我部署了一个新版本的应用程序，它根本没有

SomeRoute

，或者里面有完全不同的东西。应用程序将尝试访问

https://myapp.com/someRoute.bundle.js

并失败，因为该资产不再存在。应用程序重新加载显然会有所帮助，但这仍然不是一个令人愉快的行为

我看到的一个解决方案是将内容散列包含到所有资产中，因此它将是

someRoute.1e4f.js

，然后在一段时间内托管所有不同的应用程序版本，直到所有应用程序用户都拥有最新版本的应用程序

如果这是一条路，那么我不知道如何组织它。我目前在vercel.com（前Zeit）主持我的PWA，我从来没有看到他们是否具有保留过去构建的资产的功能。 当然，我可以将所有构建人工制品都提交到git中，但这会很快使回购协议膨胀

另一个解决方案是在初始加载时预取所有应用程序的路由，并将它们缓存在服务工作者中。这显然会有所帮助，但它无法达到代码拆分以减少网络流量使用的目的

另一个解决方案是在JS块上检测404并强制重新加载应用程序。对于某些用户来说，这将是一个非常不愉快的用户体验

---

那么严肃的应用程序是如何处理的呢？我很惊讶如此重要的问题竟然没有引起注意。

我对这个主题做了一些研究，除了我在问题中已经提到的以外，实际上没有什么可以补充的。我在这篇文章中更详细地解释了这一点：