Angular Service Worker预取外部视频致性能问题的解决咨询

我来帮你搞定这个Service Worker乱预取视频的性能问题！核心原因是Angular SW默认会处理很多请求，哪怕你没在配置里显式声明。要让它只预取你指定的资源，完全忽略那个视频路径，我们可以通过配置里的排除规则来实现，下面是具体步骤：

方法1：给资源组添加排除规则 #

直接在你的ngsw-config.json里，给现有的资源组加上排除规则，明确告诉SW别碰那个视频路径。修改后的配置如下：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"],
        "urls": ["https://fonts.googleapis.com/icon?family=Material+Icons", "https://fonts.gstatic.com/s/materialicons/v50/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"]
      }
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"],
        // 新增：排除所有视频路径下的资源
        "exclude": [
          "https://some.external.url.com/sites/default/files/video/**"
        ]
      }
    }
  ],
  // 可选保险：限制导航请求范围，避免SW误把视频当导航资源处理
  "navigationUrls": [
    "/**",
    "!https://some.external.url.com/sites/default/files/video/**"
  ]
}

关键说明： #

• exclude数组：把视频所在的完整路径（带通配符**匹配所有子文件）加进去，SW就会完全忽略这些请求，不会预取也不会缓存。
• navigationUrls：这个配置是告诉SW哪些URL属于“导航请求”（比如用户刷新页面、点链接）。加个!前缀排除视频路径，防止SW误把视频请求当成导航来处理，进一步避免不必要的预取。

方法2：用Data Groups彻底禁用视频缓存（可选） #

如果你的视频是动态加载的资源，还可以单独建一个dataGroups配置，强制SW不对这些视频做任何缓存操作。示例如下：

{
  // ... 保留原有的assetGroups配置
  "dataGroups": [
    {
      "name": "ignore-videos",
      "urls": [
        "https://some.external.url.com/sites/default/files/video/**"
      ],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 0,
        "maxAge": "0u",
        "timeout": "0u"
      }
    }
  ]
}

这个配置相当于给视频路径加了个“禁止缓存”的标签，SW会直接跳过这些请求的预取和缓存逻辑。

最后别忘了验证！ #

改完配置后，一定要重新构建生产环境包（ng build --prod），然后重新部署。你可以打开浏览器DevTools的「Application > Service Workers」面板，查看缓存的资源列表，确认视频文件没有被预取进来。如果SW还是旧版本，记得在面板里点「Update」按钮手动更新，或者让用户刷新页面触发更新。

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