如何在 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緩存控制工作）中。

即使圖像和 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 文件的“利用瀏覽器緩存”。 我認為他們的“源”目錄鏈接結構存在一些問題：“ /*.@(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。

谷歌說：

我們建議靜態資產的最短緩存時間為一周，最好最長為一年。

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

使用這個，它對我有用。