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

Question

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

我有我的 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 文件的“利用浏览器缓存”。我认为他们的目录链接结构存在一些问题，我有 "source" : "/*.@(eot|otf|ttf|ttc|woff|css)",**。我真的不知道如何解决它。

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

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

Answer 1

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

谷歌说：

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

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

使用这个，它对我有用。