如何在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,字体都是从根目录下的两个dir.

现在是我的.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".我认为他们的目录链接结构存在一些问题,我有"来源":"/*.@(etc'otf | ttt | ttt | 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.

谷歌说:

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

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

使用它,它适用于我.