HTML,CSS,JS

キャッシュを効かせつつ変更を反映(クエリ付けても効かないとき)

More than 1 year has passed since last update.

キャッシュを効かせつつ変更を反映

jsやcssの変更を反映させたいけどキャッシュが使われてしまう。
クエリを付ける方法が有名ですが、効かない場合があったのでそれと格闘しました。

これが使えていれば一番平和 ※ダメな事も

よく使われる手法が下記のように、ファイルの更新日時をクエリとして付与する方法。

index.html
<script src="test.js?time=1499939904"></script>

しかしこの方法ではキャッシュが使われてしまう場合があるようです。
(Google Chromeで確認)
昔は効いていたので、どこかのアップデートで変わってしまったのかもしれません。

一旦妥協 ※ダメな事も(再)

ひとまず変更を反映させる事を優先し、キャッシュの利用を無効化しました。

index.html
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

ところが、これでもキャッシュが使われ続けている事が判明。
調べたところ、フッター付近に記述すれば解消する可能性があるようです。
が、確実性が無いらしく、妥協に妥協を重ねるのも嫌なので抜本的な解決策を模索。

クエリを使わずに別ファイルとして認識させる

ファイルの更新日時をクエリに使用するのではなく、ディレクトリ名として使う事で解消。

index.html
<script src="/js/1499939904/test.js"></script>
.htaccess
RewriteEngine On
RewriteRule ^(js|css)/([0-9]+)/(.+\.(js|css))$ $1/$3?time=$2 [QSA]

1499939904というディレクトリは存在しないので、.htaccessでリライトして消してしまいます。
他にも環境に合わせて.conf等に記述したり独自のスクリプトで対応してもいいと思います。

同じようにキャッシュに悩まれている方はお試しを!