如何部署具有代码拆分的 JS 应用程序，确保过去的应用程序版本不会中断

Question

我有一个使用 Webpack 和 React 构建的简单 PWA 应用程序。它具有动态进口代码分裂设置（如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 中，但这会很快使 repo 膨胀。

另一种解决方案是在初始加载时预取所有应用程序的路由，并将它们缓存在 Service Worker 中。这显然会有所帮助，但它违背了代码拆分以减少网络流量使用的目的。

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

那么严肃的应用程序如何处理它呢？我很惊讶这么重要的问题如何缺乏关注。

Answer 1

我对这个主题做了一些研究，除了我在问题中已经提到的内容之外，确实没有什么可补充的。我在本文中更详细地解释了它：http://dimaip.github.io/2020/04/25/deploying-apps-with-code-splitting/