web-dev-qa-db-ja.com

ApacheでCSSおよびJSファイルのキャッシュを有効にする

Debian 8.2でApache 2.4を使用して、すべてのcssおよびjsファイルのキャッシュを有効にしようとしています。画像のキャッシュは正常に機能します。つまり、ブラウザは304ステータスを受信するため、再度ダウンロードされません。しかし、他のファイルのキャッシュが機能しません。

私はこれを仮想ホストファイル内で使用します。

<IfModule mod_expires.c>
    <FilesMatch "\.(jpe?g|png|gif|js|css)$">
        ExpiresActive On
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>

expiresモジュールが有効になっています。 Apacheを再起動したり、ブラウザのCookieを削除したりしました。成功しませんでした。

ブラウザー開発者ツールからのgif画像に対する応答：

Cache-Control:max-age=604800
Connection:Keep-Alive
Date:Wed, 25 Nov 2015 21:37:50 GMT
ETag:"4174a-4e69c97fbf080"
Expires:Wed, 02 Dec 2015 21:37:50 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.4.10 (Debian)

CSSファイルの応答：

Accept-Ranges:bytes
Cache-Control:max-age=604800
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:135
Content-Type:text/css
Date:Wed, 25 Nov 2015 21:37:50 GMT
ETag:"5116-525639d271c78-gzip"
Expires:Wed, 02 Dec 2015 21:37:50 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Wed, 25 Nov 2015 20:50:52 GMT
Server:Apache/2.4.10 (Debian)
Vary:Accept-Encoding

有効期限の見出しが正しく設定されているようですが、ブラウザはファイルを要求し続けます（200 OK）。

ChromeとFirefoxで試しました。

概要：

1.）Webサイト内のリンクをたどると、ブラウザはキャッシュされたファイルを使用します。しかし、F5キーを押すと、cssファイルとjsファイルが再ダウンロードされますが、画像は再ダウンロードされません。画像は304です。それで結構です。

2.）Ctrl-F5を押すと、当然、すべてのファイルが再ダウンロードされます。それも結構です。

3.）したがって、問題は他のファイルのキャッシングを有効にする方法です（画像のように）。 Apacheが画像と他のファイルを区別するのはなぜですか？設定ファイルには、画像に特別なものは何も入れていません。

Q：cssおよびjsファイルのキャッシュを適切に有効にする方法は？

別のQ：ブラウザにファイルを要求しないように指示する特別なhttpヘッダーがあります。その理由は、ファイルが変更されたかどうかを確認するリクエストを送信する場合でも、100〜200ミリ秒かかるため、時間がかかりすぎるためです。ファイルは変更されません。そして、それらが変更された場合、myFile.css？v = 1.1のように、cssファイルの最後にバージョン文字列を簡単に配置できます。したがって、リクエストの送信を完全に停止する方法が必要です。

[〜＃〜]解決済み[〜＃〜]

まず、以下の回答で述べたように、Apacheにバグがあります。

第二に、私の側に誤解がありました。私はこれが現代のブラウザがどのように機能するかだと思います：

1.）Webサイト内のリンクをたどる：ファイルが変更されているかどうかを確認する場合でも、要求は送信されません。

2.）F5：リクエストを送信します。ファイルが変更されていない場合、サーバーは304で応答します。

3.）Ctrl + F5：完全ダウンロード。

F5に関する動作は私には意味がありません。とにかく。

誰かがそれを必要とする場合に備えて、ここに私が仮想ホストファイルに入れた実用的なソリューションがあります：

RequestHeader  edit "If-None-Match" "^\"(.*)-gzip\"$" "\"$1\""
Header  edit "ETag" "^\"(.*[^g][^z][^i][^p])\"$" "\"$1-gzip\""

LoadModule expires_module /usr/lib/Apache2/modules/mod_expires.so
ExpiresActive On

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    ExpiresDefault "access plus 4 weeks"
</FilesMatch>
apachehttp-headers
13
user4039871

Ezipをオフにします。gzipが304秒間オンの場合、Apacheではうまく機能しません。

ここを参照してください： Apacheが304応答を送信していません（mod_deflateとAddOutputFilterByTypeが有効な場合）

画像はすでに圧縮されているため、通常はgzip圧縮されていないため、なぜ機能するのか。

ETagは現在の実装では私の意見ではそれほど有用ではありません（理由についての詳細な説明については、ブログ here を参照してください）。したがって、上記のバグと相まって、それらをオフにします。

2番目の質問については、長い有効期限を設定します。

以下のコメントで説明されているように、3つのシナリオがあります。

  1. 通常のブラウジング-キャッシュを使用する必要があり、キャッシュは有効期限後もまだ有効である場合にのみ使用されます（この場合、同じ有効期限で再び有効に設定されます）。

  2. F5または更新ボタン。これは、ユーザーがページとそのすべてのリソースがまだ有効であることを確認するための明示的なアクションであり、すべてが再確認され（キャッシュ内にあり、expiriesヘッダーに従って有効である場合でも）、変更されていないときに304が送信されます。 「有効期限が切れたものを再ダウンロードするだけで、キャッシュされたアイテムはまだ有効なのでそのままにしておく」という意味ではありません。個人的には、ブラウザーが使用する現在の実装は理にかなっており、あなたの方法はエンドユーザーを混乱させるでしょう。一部のサイトでは画像、CSS、JavaScriptなどのアセットをバージョン管理する場合があるため、再確認は時間の無駄ですが、すべてのサイトがこれを行うわけではありません。

  3. Ctrl + F5。これは強制更新です。 「キャッシュを無視してすべてをダウンロードする」という意味です。開発サーバーで要求されたファイルを変更する開発者以外は、ほとんど必要ありません。

すべてが理にかなっていることを願っています。

編集2016年5月12日：Firefoxが実際に必要な機能を提供しているようです： https://bitsup.blogspot.ie/2016/05/cache-control-immutable.html?m=1

3
Barry Pollard