Workbox结合Webpack时本地JS/CSS资源隐形缓存问题

这问题我之前帮同事排查过类似的，结合你描述的现象——CDN图片在Cache Storage里能正常看到且由SW分发，但本地JS/CSS对应的命名缓存是空的，页面加载时却没有网络请求（说明SW确实在提供资源），大概率是Workbox的预缓存和运行时缓存逻辑混淆，或者缓存配置细节没处理对，下面分情况给你分析和解决思路：

1. 先确认：你可能找错了缓存容器！ #

Webpack搭配Workbox时，默认会把打包生成的本地JS、CSS文件加入预缓存清单，这些资源会被存在以workbox-precache-vX（X是版本号）命名的缓存里，而不是你配置的自定义命名运行时缓存。

你可以去Chrome DevTools的Application -> Cache Storage里找找有没有这个前缀的缓存，点开应该就能看到你的本地JS/CSS文件了。

如果确实是预缓存在起作用，但你想把这些资源放到自己的命名缓存里，需要调整Webpack的配置：

• 如果你用的是workbox-webpack-plugin的GenerateSW插件，添加exclude选项把JS/CSS排除在预缓存外：

  new WorkboxPlugin.GenerateSW({
    exclude: [/\.js$/, /\.css$/],
    // 其他配置项...
  });
  

• 然后手动添加运行时缓存规则，指定自定义缓存名：

  workbox.routing.registerRoute(
    ({ url }) => url.origin === self.location.origin && 
                  (url.pathname.endsWith('.js') || url.pathname.endsWith('.css')),
    new workbox.strategies.CacheFirst({
      cacheName: 'local-js-css-cache', // 你的自定义缓存名
    })
  );
  

2. 运行时缓存规则的匹配逻辑有问题 #

如果确认已经把本地资源纳入运行时缓存，但缓存还是空的，那可能是路由匹配规则没写对：

• 检查url.origin的判断是否正确，比如本地开发环境可能带端口号（http://localhost:3000），有没有漏掉？
• 路径匹配是否覆盖了所有JS/CSS？比如有些文件在子目录下（/static/js/main.js），你的endsWith('.js')是没问题，但如果规则里写了固定路径前缀，可能会漏掉。

可以打开DevTools的Console，过滤workbox关键词，重新加载页面，看看Workbox的日志输出，里面会显示哪些资源被匹配到了缓存策略，有没有命中你的本地资源规则。

3. 缓存键（Cache Key）的隐形差异 #

Webpack打包的JS/CSS通常会带内容哈希（比如main.abc123.js），如果你的缓存规则是针对不带哈希的路径写的，或者Workbox生成的缓存键和你预期的不一样（比如加了查询参数），就会导致你在Cache Storage里找不到对应的条目，但SW实际已经缓存了。

你可以在DevTools的Application -> Cache Storage里，用搜索框输入文件名的一部分（比如main.js），看看有没有匹配到的缓存条目，不管缓存名称是什么。

4. DevTools视图的刷新问题 #

有时候Chrome DevTools的Cache Storage视图会有延迟，不会自动刷新最新的缓存条目：

• 右键点击对应的缓存名称，选择「Refresh」手动刷新；
• 或者关闭Application面板再重新打开，甚至重启DevTools试试；
• 另外，确保你没有开启浏览器的「Disable cache」选项（在Network面板里），不然缓存不会被写入磁盘。

内容的提问来源于stack exchange，提问作者arami