代码之家 › 专栏 › 技术社区 › Kellen

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

firebase-hosting firebase typescript angular json

Kellen · 技术社区 · 7 年前

我在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很陌生,所以请给出具体的答案。提前感谢!

2 回复 | 直到 7 年前

Faiz Mohamed Haneef 7 年前

有2种解决方案

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、谷歌速度测试黑客补丁

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

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

Giona Granata 7 年前

您可以放心地忽略Google PageSpeed(和lightouse…以及类似工具)中的这3条建议。

事实上,具有讽刺意味的是,许多来自Google CDN的文件(例如字体)在Google PageSpeed和其他工具(如Lighthouse)中抛出了该错误或类似错误。

当然,我认为谷歌应该对这些工具有所改进,他们应该考虑到这一点。

Google PageSpeed并不是要在一场比赛中取得第一名,也不是要获得100分。。。这只是一个总体(和基本)指标,表明我们正在做什么。有时它表示你没有问题,有时不表示你有问题。

问题是,当一个SEO“专家”带着这些检查的结果来找你时(我认为许多开发人员可能会与之相关……)。

请谷歌做点什么!