PWA网站每次加载缓存持续增长，疑似Google Analytics脚本导致如何解决？

你遇到的缓存持续增长问题，核心原因是Google Analytics的请求会自动携带随机查询参数来规避HTTP缓存，若你的Service Worker缓存策略没有针对性过滤这类动态请求，每一次访问生成的不同请求URL都会被识别为全新资源存入缓存，最终导致缓存体积持续上涨。你添加crossorigin="anonymous"无效是因为该属性仅用于解决跨域资源的CORS权限问题，和动态参数导致的重复缓存没有关联。

具体修复方案如下：

• 首先调整Service Worker的fetch拦截逻辑，直接排除所有Google Analytics相关请求，不将其纳入缓存范围：

self.addEventListener('fetch', (event) => {
  // 过滤谷歌分析相关请求，直接走网络不缓存
  if (event.request.url.includes('google-analytics') || event.request.url.includes('googletagmanager')) {
    return
  }
  // 原有缓存逻辑放在下方
  // ...
})

• 补充缓存淘汰机制：给你的缓存池设置最大条目限制，每次新资源存入前检查缓存容量，超出限制时优先删除最早的缓存条目，避免极端场景下缓存无限制膨胀。
• 如果你使用Workbox之类的Service Worker工具库，可以直接使用内置的排除规则配置，比如设置ignoreURLParametersMatching或者直接在路由规则中排除谷歌分析域名的所有请求。

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