时间戳

首页 > 解决方案 > 如何从 VueJS PWA SW 预缓​​存中排除一个块？

service-worker - 如何从 VueJS PWA SW 预缓​​存中排除一个块？

问题描述

目前，我全新安装了带有一些测试页面和组件的 vuejs 应用程序。我的所有路由和组件都使用动态导入来加载 js 块，仅当用户转到特定路由或渲染组件并且它在 SPA 和 SSR 模式下工作正常时。当 PWA 模式在启动时预取所有块时，会出现此问题。

我已经尝试过“排除”功能，但它仍然预取了文件。

有没有办法排除完整的路由，例如 /admin 被预取？因为这仅供内部使用，离线使用不需要。

我们正在使用 webpack + 工作箱捆绑器。

任何帮助将不胜感激。

标签： service-workerprogressive-web-appsworkbox

解决方案

我编辑了您的问题标题以匹配您实际询问的内容。我希望我做对了:)

是的，这是可能的。您可以从要预缓存的资产列表中排除延迟加载的块（“路由”或“页面”或其他）。

我假设您正在使用基于 Vue CLI 的项目。在https://cli.vuejs.org/config/#pwa中查找 PWA 配置选项。它将引导您在此处https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa进行 Vue CLI PWA 插件的完整配置。这将告诉您如何将任何选项传递给底层的 workbox-webpack-plugin。您需要的是excludeChunks选项，此处描述https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config。

推荐阅读