web-dev-qa-db-ja.com

Firebaseホスティングでブラウザキャッシュを活用する方法

私はGoogleのFirebaseで個人ブログをホストしています。私のブログはjekyllに基づいています。 Firebaseは、プロジェクトの所有者がhttpヘッダーを変更できるfirebase.jsonファイルを提供します。

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の両方ですが、フォントはルートから2ディレクトリの深さです。

これが私の.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

cachingfirebasehttp-headersfirebase-hosting
20
John Adam

ポートフォリオのウェブサイトを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"
      } ]
    } ]

これを使用してください、それは私のために働きます。

23
alfaiz momin