javascript - 如何使用 Webpack 代码分割来处理部署？

Question

这是我在野外进行 Webpack 代码分割时遇到的一个意外问题:想象一下这种情况:

1. 用户通过 Webpack 代码分割加载 React 应用，并加载一些包 block
2. 进行部署，并且用户可能从服务器接收的任何 future block 的内容都会更新(注意:部署期间以前的 block 会在服务器上删除)
3. 用户单击链接并加载新路由，这会触发加载更多 bundle block 。除了这些新 block 与用户浏览器已加载的 block 不兼容，并且应用程序由于运行时错误而中断

如何防止这种情况发生？

一种可能的解决方案是维护多个版本化的 block 集，但我想知道大型应用程序是否使用更简单的解决方案。

如果preload-webpack-plugin使用时，可以预取所有 block ，但它们只会缓存很短的时间(Chrome 中为 5 分钟)。

Answer 1

饰演马克斯·斯托伊伯 writes on spectrum.chat :

ServiceWorkers come in really handy when doing code splitting!

We use the excellent offline-plugin by @nekr to cache all the current bundles locally, so no matter if the server updates the files or not the ServiceWorker will always serve the files from the local cache. Every hour it will check the server for updates and, if an update is available, download all the fresh bundles from the remote server and cache them locally. The next time the user restarts the app the new version of the app is used! 💯

https://github.com/NekR/offline-plugin

此解决方案意味着您的应用程序会预先下载所有 block ，这在带宽方面违背了代码分割的目的，但至少您仍然保留了仅解析加载应用程序所需的 block 的好处，这对我来说在慢速设备上很重要。此外，浏览器刷新/缓存现在涉及 Service Worker 生命周期(请参阅 https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle 处的“等待”)。