如何从 VueJS PWA SW 预缓存中排除一个块？答案

【问题标题】：How to exclude a chunk from VueJS PWA SW precache?如何从 VueJS PWA SW 预缓存中排除一个块？
【发布时间】：2019-10-15 13:45:44
【问题描述】：

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

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

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

我们正在使用 webpack + workbox bundler。

任何帮助将不胜感激。

【问题讨论】：

【解决方案1】：

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

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

我假设您正在使用基于 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。

【讨论】：

佩特，非常感谢。我完全按照您所说的进行了尝试，但是没有用。我在我的 src/route 文件中命名了我的组件。然后在我的 webpack-workbox-plugin 选项中使用 excludeChunks。
{ path: '/admin', component: () => import(/ webpackChunkName: "chunk_admin" / 'layouts/AdminLayout.vue'), children: [ { path: '/page3', component: () => import(/ webpackChunkName: "chunk_admin" / 'pages/Index2.vue') }, { path: '/page4', component: () => import(/ webpackChunkName: "chunk_admin" / 'pages/Index3.vue') } ] }@peter
workboxOptions: {excludeChunks: ["chunk_admin"]} Also used "exclude" with and without extention at the end.
所以第一次加载了chunk_admin，然后当我点击路由/admin然后它再次下载:)（不是从缓存中）
嗯，这就是它的工作原理......所以你的配置文件中有一个小错误 :-) 需要注意的一点：检查构建的应用程序文件（通常）更容易dist/ 目录，而不是总是用浏览器尝试应用程序。查看生成的 precache-manifest.json 文件。