CSSおよびJS URLをバージョン管理する最良の方法は何ですか?


26

Yahooの大いに注目されているサイトの高速化のベストプラクティスに従って、私たちは、将来のキャッシュ有効期限ヘッダーを使用してCDNから静的コンテンツを提供します。もちろん、これらの「静的」ファイルを時々更新する必要があるため、現在、ファイル名の一部としてインフィックスバージョンを追加します(ファイルの内容のSHA1合計に基づいて)。したがって:

styles.min.css

になる:

styles.min.abcd1234.css

ただし、バージョン管理されたファイルの管理は退屈になる可能性があり、GET引数表記がよりクリーンで優れているかどうか疑問に思っていました。

styles.min.css?v=abcd1234

どちらを使用しますか?考慮すべきブラウザまたはプロキシ/キャッシュ関連の考慮事項はありますか?


私が尋ねる理由は、GET引数スタイルを使用しない理由を聞いたことを思い出すようですが、その理由は思い出せません。
デヴィッドエイク

GET-argumentを使用する場合、何らかの種類のサーバー側スクリプトでスタイルシートを提供する必要はありません(そして、静的ではなくなります)。
ロータスノーツ

@Lotus:GET-argumentsを送信できますが、何も探していない場合は黙って無視されます。
デビッドエイク

回答:


10

GoogleのMake the Web Fasterによると、クエリパラメータを持つページは多くのHTTPプロキシによってキャッシュされません。

ほとんどのプロキシ、特にバージョン3.0までのSquidは、「?」でリソースをキャッシュしません。Cache-control: public応答にヘッダーが存在する場合でも、URLに含まれます。これらのリソースのプロキシキャッシュを有効にするには、静的リソースへの参照からクエリ文字列を削除し、代わりにパラメーターをファイル名自体にエンコードします。

だから、styles.min.abcd1234.css好ましい解決策です。適切なURL書き換えメカニズムを使用して、透過的styles.min.abcd1234.cssに実装しやすいものに変えることができますstyles.min.css?v=abcd1234

HTTPSのみをサポートしている場合、プロキシは通常SSL経由で提供されるページをキャッシュできないため、このアドバイスは適用されません。


2
クエリ文字列のキャッシュとプロキシサーバーに関する情報は少し古いのだろうか?Googleのドキュメントは、このコンテキストでクエリ文字列とプロキシサーバーを参照しなくなりました。けれども例はまだ、ファイル名自体を変更関与しません。Squid 2.7(2008)および3.1(2010)は、クエリ文字列のキャッシュをデフォルトでサポートすると報告されており、これをサポートするように以前のバージョンを構成できました。
MrWhite

15

GETスタイルのバージョン管理を使用すると、空のキャッシュから複数のURL(例:style.css?v=123and)style.css?v=456が同じコンテンツを返します。しかし、特に一度に1つしかリンクしないため、これが問題になることはありません。

GETスタイルを維持する方がはるかに簡単だと思います。別のファイルは必要ありません。URLを変更するだけで、ブラウザはCSSを新たに取得します。

更新:さらなる調査では、クエリ文字列を使用すると、ブラウザがファイルをキャッシュしなくなる可能性があるようです。ただし、Expiresこのような適切なヘッダーを返す場合は問題ありません。

更新2:受け入れられた回答は、一部のプロキシがクエリ文字列でファイルをキャッシュしないことを指摘しています。ただし、これは古い情報に基づいています。彼らがSquidで言及した特定の問題は7年前に修正されました。印象的なWebはこれについて良い評価をしました。


それが私が覚えようとしていた警告です。リンクをありがとう。
デビッドエイク

1

クエリ文字列はURLの一部と見なされるため、どちらも同じように機能します。クエリ文字列を変更すると、リソースの名前が変更され、ブラウザがファイルの新しいコピーを取得します。

私はあなたが維持するのがより簡単な方法を使用すると言います。


0

これは上記の質問への答えではありません、私はより良い解決策が欲しいので、ここで自分自身に尋ねています

どちらの方法でも、cssファイルとjsファイルが参照されるファイルを変更する必要があります。したがって、実際には、変更を行った後にアプリケーションサーバーを再起動する必要があります。

アプリケーションサーバーを再起動せずに静的ファイルのバージョン管理を処理できるより良い方法はありますか?

ソリューションでは以下が除外されています

  • cssおよびjsファイル名の変更
  • URLでクエリパラメータを渡す

また、ソリューションはcache-controlの設定や有効期限に影響を与えるべきではありません。

ありがとう


1
ここは初めてのようです。これはいい質問です。おそらく参考のためにこの質問にリンクして、そのように投稿する必要があります。モデレーターの注意を引くためにこれを報告しました。
デビッドエイク

Davidが指摘したように、このサイトは他のフォーラムサイトとは異なります。あなたが聞いて新しい質問を持っている場合は、「質問ボタンを頼む」をクリックして自由に感じる
マーク・ヘンダーソン

これは便利な説明です。スタイルシートを変更する場合は、サイト全体で何百ものスタイルシートへの参照を更新するのではなく、同じ名前と参照を保持することをお勧めします。
マークストースバーグ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.