利用浏览器缓存 - 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"
  }
}

大部分代码基于以下帖子： 如何在Firebase托管中利用浏览器缓存

但是，它似乎没有起作用。 当我重新运行PageSpeed Insights时，我仍然遇到同样的错误。 我该如何解决这个问题？ 我对Angular非常新，所以我将非常感谢您的具体回答。 提前致谢！

Answer 1

有两种解决方案

1.提供您域中的外部文件。

下载以下3个文件，并从您自己的应用程序中提供。 这样您就可以控制缓存时间。 确保在更新时保留第三方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 Speed测试的Hack修复

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

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

Answer 2

您可以放心地忽略来自Google PageSpeed（以及灯光......和类似工具）的3条建议。

事实上有一些讽刺的事实是，从谷歌CDN（例如字体）提供的许多文件会在Google PageSpeed和其他工具（如Lighthouse）中抛出该错误或类似错误。

当然我认为谷歌应该对这些工具做些什么，他们应该考虑到这一点。

谷歌PageSpeed并不是要在一场比赛中获得第一名或者获得100分......这只是我们如何做的一般（和基本）指标。 有时它表示您没有的问题，有时并不表示您遇到的问题。

问题是当一个搜索引擎优化“专家”带来这些检查的结果时（我想许多开发人员可以与之相关......）。

请谷歌做点什么！