如何在Firebase托管中利用浏览器缓存 [英] How to Leverage Browser Caching in Firebase hosting

问题描述

我在Google的firebase上托管了我的个人博客。我的博客基于jekyll。 Firebase提供了firebase.json文件，项目所有者可以在其中修改http标头。

I have hosted my personal blog on Google's firebase. My Blog is based on jekyll. Firebase provides firebase.json file from where owner of project can modify the http header.

我有我的css文件 https://blogprime.com/assets/css/init.css 和中的字体https://blogprime.com/assets/font/fontname.woff （http缓存控制不起作用）

I have my css files https://blogprime.com/assets/css/init.css and my fonts in https://blogprime.com/assets/font/fontname.woff ( http cache control not working )

我的图像存储在:: https://blogprime.com/assets/img /imagename.entension （http缓存控制工作）。

My images are stored inside :: https://blogprime.com/assets/img/imagename.entension ( http cache control working ).

即使图像和css，字体都是从根目录下的两个dir。

Even though both images and css, fonts are two dir deep from root.

现在是我的.json文件代码..

Now heres my .json file code..

{"hosting": 
    {"public": "public",
    "headers": [
        {"source" : "**/*.@(eot|otf|ttf|ttc|woff|css)",
        "headers" : [
            {"key" : "Access-Control-Allow-Origin",
            "value" : "*"}]
        }, 
        {"source" : "**/*.@(jpg|jpeg|gif|png)",
        "headers" : [
            {"key" : "Cache-Control",
            "value" : "max-age=30672000"
            }]
        }, 
        {"source" : "404.html",
        "headers" : [
            {"key" : "Cache-Control",
            "value" : "max-age=300"
            }]
        }]
    }
}

在添加此图像之前，所有内容都有1小时的缓存生命周期...但是现在只有我的css文件和字体文件的缓存寿命为1小时。

Before adding this my images and everything had 1hour of cache lifespan.... but now only my css files along with font files are having 1 hour cache lifespan.

你能告诉我如何为我的css修复Leverage Browser Caching文件。我认为他们的目录链接结构存在一些问题，我有source： /*.@（eot | otf | ttf | ttc | woff | css），**。我真的不知道如何解决它。

Can you please tell me how to fix the "Leverage Browser Caching" for my css files. I think their's some problem with the directory link structure which I have "source" : "/*.@(eot|otf|ttf|ttc|woff|css)",**. I really don't know how to fix it.

您可以查看Google pagespeed测试..

You can check the Google pagespeed test ..

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblogprime.com%2Fwordpress%2Fdns-prefetch-in-wordpress.html

推荐答案

我只是将我的投资组合网站设为99/100。

I just make my portfolio website 99/100.

谷歌说：

我们建议静态资产的最短缓存时间为一周，最好为一年
。

We recommend a minimum cache time of one week and preferably up to one year for static assets.

    "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)",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=604800"
      } ]
    }, {
      // Sets the cache header for 404 pages to cache for 5 minutes
      "source" : "404.html",
      "headers" : [ {
        "key" : "Cache-Control",
        "value" : "max-age=300"
      } ]
    } ]

使用它，它适用于我。

这篇关于如何在Firebase托管中利用浏览器缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！