Angular:在静态内容文件上设置maxAge

Question

我的灯塔报告建议我“以高效的缓存策略为资产提供服务”。我的问题是我的runtime.xxx.js、polyfills.xxx.js、main.xxx.js和styles.xxx.js文件需要比1小时更长的缓存生存期。使用Service Worker能否为这些文件实现更长的缓存寿命？如果是这样的话，是怎么做的？

我使用的是一个ServiceWorker，它使用一个ngsw-config文件。

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "*.js",
          "/*.chunk.js"
        ]
      },
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "86400",
        "strategy": "performance"
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

当我使用谷歌Chrome DevTools并离线时，我的应用程序仍然显示。网络选项卡显示我的styles.xxx.css是“(来自服务工作进程)”，但我的runtime.xxx.js、polyfills.xxx.js和main.xxx.js是“(来自内存缓存)”。当我单击runtime.xxx.js时，Headers选项卡缓存控制是max-age=3600。(可能是默认标头设置覆盖了我的服务工作者。)

当应用程序离线时，我已经包含了Chrome Dev Tools Network选项卡中的信息。我的文件在dist/maldonado-a/中。例如dist/maldonado-a/polyfills.xxx.js s.xxx.js。

​

​

​

​

如果你需要更多信息，请写信给我。谢谢。

Answer 1

我认为在服务工作者所做的缓存和Lighthouse所报告的内容之间存在一些混淆。

cache设置为ngsw-config.config是指在再次从服务器请求文件之前，服务工作者应将文件缓存(供脱机使用)多长时间。

灯塔指的是HTTP缓存头，它说太低了。因此，在Lighthouse docs中，您应该将标头设置为：

Cache-Control: max-age=31536000

现在这已经超出了Angular的范围。这是您的HTTP服务器的责任。如何设置取决于您使用的是什么: IIS、Apache等。

对于像Angular这样的SPA (单页应用程序)，可以考虑的一个选择是，如果你把它们放在CDN上，那么你就会得到很好的缓存(还有一个很棒的灯塔分数！)。

看看Azure CDN或Google CDN ..。AWS可能也有一款。