如何部署具有代码拆分的 JS 应用程序，确保过去的应用程序版本不会中断
How to deploy JS app that has code splitting, making sure past app versions don't break
我有一个使用 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，但这会很快使存储库膨胀。
另一种解决方案是在初始加载时预取所有应用程序的路由并将它们缓存在服务工作者中。这显然会有所帮助，但它违背了代码拆分以减少网络流量使用的目的。
另一种解决方案是检测 JS 块上的 404 并强制重新加载应用程序。对于某些用户来说，这将是一个非常不愉快的用户体验。
那么严肃的应用程序如何处理它？我很惊讶这么重要的问题怎么没有得到关注。
我对这个主题做了一些研究，除了我在问题中已经提到的内容之外，确实没有什么可以补充的。我在这篇文章中更详细地解释了它：http://dimaip.github.io/2020/04/25/deploying-apps-with-code-splitting/
我有一个使用 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，但这会很快使存储库膨胀。
另一种解决方案是在初始加载时预取所有应用程序的路由并将它们缓存在服务工作者中。这显然会有所帮助，但它违背了代码拆分以减少网络流量使用的目的。
另一种解决方案是检测 JS 块上的 404 并强制重新加载应用程序。对于某些用户来说，这将是一个非常不愉快的用户体验。
那么严肃的应用程序如何处理它？我很惊讶这么重要的问题怎么没有得到关注。
我对这个主题做了一些研究，除了我在问题中已经提到的内容之外，确实没有什么可以补充的。我在这篇文章中更详细地解释了它：http://dimaip.github.io/2020/04/25/deploying-apps-with-code-splitting/