我有一个使用 Webpack 和 React 构建的简单 PWA 应用程序。
它对动态导入进行了代码拆分设置(例如 React.lazy(() => import('./SomeRoute')) )，因此不同的路由会获得不同的 JS 包，例如:main.bundle.js , someRoute.bundle.js
现在想象一下这种情况:我部署了一个没有 SomeRoute 的应用程序的新版本。或完全不同的东西。该应用程序将尝试访问 https://myapp.com/someRoute.bundle.js并且由于该 Assets 不再存在而失败。应用程序重新加载显然会有所帮助，但仍然不会是一种愉快的行为。
我看到的一种解决方案是将内容哈希包含在所有 Assets 中，因此它是 someRoute.1e4f.js然后 在一段时间内托管所有这些不同的应用程序版本 , 直到所有应用程序用户都拥有该应用程序的最新版本。
如果这是要走的路，那么我不知道如何组织它。我目前使用 vercel.com(例如 Zeit)托管我的 PWA，我从来没有看到他们是否具有保持过去构建中 Assets 可用的功能。
当然，我可以将所有构建工件提交到 git 中，但这会很快使 repo 膨胀。
另一种解决方案是 在初始加载时预取所有应用程序的路由 并将它们缓存在 service worker 中。这显然会有所帮助，但它违背了代码拆分以减少网络流量使用的目的。
另一种解决方案是检测 JS 块上的 404 并强制重新加载应用程序 .对于某些用户来说，这将是一个非常不愉快的用户体验。
那么严肃的应用程序如何处理它呢？我很惊讶这么重要的问题如何缺乏关注。
最佳答案
我对这个主题做了一些研究，除了我在问题中已经提到的内容之外，确实没有什么可添加的。我在这篇文章中更详细地解释了它:http://dimaip.github.io/2020/04/25/deploying-apps-with-code-splitting/
关于reactjs - 如何部署具有代码拆分的 JS 应用程序，确保过去的应用程序版本不会中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61382892/