如何在 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 都有，但字体是从根目录深两个目录.

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 文件的利用浏览器缓存".我认为他们的目录链接结构存在一些问题，我有 "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.

你可以检查谷歌页面速度测试..

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.

谷歌说:

我们建议至少 1 周的缓存时间，最好最多 1 周静态资产的年份.

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"
      } ]
    } ]

使用这个，它对我有用.

Use this, it works for me.

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