如何在 Firebase 托管中利用浏览器缓存

Question

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

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

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

尽管图像和 css，字体都在根目录下的两个目录中。

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

{"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 小时的缓存寿命。

能否请您告诉我如何修复 css 文件的 "Leverage Browser Caching"。我认为我的 "source" 目录 link 结构存在一些问题：“/*.@(eot|otf|ttf|ttc|woff|css)",**。我真的不知道怎么解决。

您可以检查 Google pagespeed 测试..

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

Answer 1

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

Google 说：

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 托管中利用浏览器缓存

How to Leverage Browser Caching in Firebase hosting

caching

http-headers

firebase

firebase-hosting