json - 利用浏览器缓存 - Firebase/Angular 5

Question

我通过 Google 的 PageSpeed Insights 运行我的 Angular 5 网站，它大声疾呼利用浏览器缓存，列出了以下文件:

https://use.typekit.net/####.css (10 minutes)
https://www.googletagmanager.com/gtm.js?id=GTM-#### (15 minutes)
https://####.firebaseapp.com/assets/svgs/###.svg (60 
minutes)

这是我的 firebase.json 文件的格式:

    {
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      },
      {
        "source": "404.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=300"
          }
        ]
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix $RESOURCE_DIR run lint"
    ],
    "source": "functions"
  }
}

大部分代码基于以下帖子:How to Leverage Browser Caching in Firebase hosting

然而，它似乎并没有起作用。重新运行 PageSpeed Insights 时，我仍然遇到同样的错误。我该如何解决这个问题？我是 Angular 的新手，所以我将不胜感激。提前致谢!

Answer 1

有2种解决方案

1。从您的域提供外部文件。

下载以下 3 个文件并从您自己的应用程序提供它们。这样你就可以控制缓存时间。确保在更新时保留 3rd 方 css 和 js 的更新副本。

https://use.typekit.net/####.css (10 minutes) .  
https://www.googletagmanager.com/gtm.js?id=GTM-#### (15 minutes) .   
https://####.firebaseapp.com/assets/svgs/###.svg (60 
minutes)

2。谷歌速度测试的黑客修复

请务必了解 Google 速度测试只是一项建议，您无需严格遵守。其他一些工具，如 https://www.webpagetest.org/可能会给你更好的结果。但是，如果浏览器代理不是 Google Speed Insight，您可以使用以下 hack 动态包含受影响的 css 和 js。对于 Google speedtest，受影响的资源不会加载，从而在速度测试中获得更好的分数。

<script>
if (navigator.userAgent.indexOf("Speed Insights")==-1) {
...
...
</script>