Workbox PWA路由分包缓存自定义：仅缓存当前访问路由chunk咨询

全量缓存是否为Workbox默认行为 #

全量缓存路由chunk是开启Workbox预缓存（Precaching）功能后的默认表现。
Workbox配合Webpack插件使用时，默认会将构建输出的所有静态资源（包括路由分割生成的异步chunk）全部加入预缓存清单，在Service Worker安装阶段就会一次性全部下载并缓存，与用户是否访问对应路由无关。

配置仅缓存已访问路由chunk的方案 #

完全可以实现按需缓存，核心思路是把异步路由chunk从预缓存清单中排除，改用运行时缓存策略处理：

1. 修改Workbox Webpack插件配置，排除异步路由chunk
   示例配置（以GenerateSW插件为例）：

   // webpack.config.js
   const { GenerateSW } = require('workbox-webpack-plugin');
   
   module.exports = {
     // 其他webpack配置
     plugins: [
       new GenerateSW({
         // 排除异步路由chunk，可根据项目chunk命名规则调整匹配正则
         exclude: [/^async-route.*\.js$/, /\.chunk\.js$/],
         // 保留其他原有配置
       })
     ]
   }
   

   如果项目的路由chunk有统一命名规则，比如都带pages-前缀、都以.chunk.js为后缀，调整正则匹配即可。

2. 添加运行时缓存规则匹配路由chunk
   在Service Worker配置中添加对应规则，只有当chunk被实际请求时才会被缓存：

   // service-worker.js （使用InjectManifest模式时直接写在自定义sw源码中即可）
   import { registerRoute } from 'workbox-routing';
   import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
   import { ExpirationPlugin } from 'workbox-expiration';
   
   // 匹配异步路由chunk的请求
   registerRoute(
     ({ url }) => url.pathname.includes('/static/js/') && url.pathname.endsWith('.chunk.js'),
     // chunk文件名带hash时用CacheFirst策略，避免重复请求；不带hash用StaleWhileRevalidate兼顾更新
     new CacheFirst({
       cacheName: 'route-chunks',
       plugins: [
         new ExpirationPlugin({
           maxEntries: 20, // 限制最大缓存路由chunk数量，避免存储空间占用过大
           maxAgeSeconds: 30 * 24 * 60 * 60, // 缓存30天
         })
       ]
     })
   );
   

优化建议 #

• 首屏依赖的核心chunk可以保留在预缓存清单中，保证首次加载速度
• 低频访问的路由chunk可以不做强制缓存，或者设置更短的过期时间

内容的提问来源于stack exchange，提问作者Martin Nordström