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

Posted 2023-03-13

【中文标题】利用浏览器缓存 - Firebase/Angular 5

【英文标题】：Leverage browser caching - Firebase/Angular 5

【发布时间】：2018-07-25 14:26:57

【问题描述】：

我通过 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 很陌生，因此将不胜感激。提前致谢！

【参考方案1】：

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

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

当然，我认为 Google 应该对这些工具做一些事情，他们应该考虑到这一点。

Google PageSpeed 并不是要在某项比赛中获得第一名或获得 100 分……它只是我们表现的一般（和基本）指标。有时它表明您没有问题，有时并不表明您有问题。

问题是当 SEO“专家”带着这些检查的结果来找你时（我认为许多开发人员都可以与此相关......）。

请谷歌对此做点什么！

【参考方案2】：

有两种解决方案

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

下载以下 3 个文件并从您自己的应用程序中提供它们。这样您就可以控制缓存时间。确保在更新时保留第 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 速度测试只是一个建议，您无需严格遵守。 https://www.webpagetest.org/ 之类的其他工具可能会给您带来更好的结果。 但是，如果浏览器代理不是 Google Speed Insight，您可以使用以下 hack 动态包含受影响的 css 和 js。对于 Google speedtest，受影响的资源不会加载，从而在速度测试中获得更高的分数。

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

【讨论】：

为什么要尝试通过添加一些自定义逻辑来欺骗应该为您提供洞察力的工具以使其无法正常工作？只是不要完全使用它。

因为工具不够智能

没有危险的胜利不会带来荣耀。

是的。我同意。 :)