手動でキャッシュを回避
JavaScriptファイルを外部ファイルとして読み込む際、ブラウザによってキャッシュされてしまい、ファイルを更新しても変更が反映されないことがあります。
この対策として、キャッシュされないように、読み込むURLを変更する方法があります。そのうちの一つとしては、URLパラメータを変更する方法です。
<script src="file.js?v=1"></script>
クエスチョン以降はクエリパラメータで、v=1を設定しています。この値には意味がないので、好きな文字に変更しても問題ありません。大事なのは、クエリパラメータを変更することで、ブラウザは異なるファイルと認識し、キャッシュを無視して再読み込みします。
クエスチョンマーク( ? )以降はクエリパラメータと呼ばれ、上記の例では v=1 を設定しています。この v=1 という値自体に特別な意味はなく、v=abc や version=2 など、任意の文字列に変更しても問題ありません。
重要なのは、クエリパラメータの値を変更することで、ブラウザが別のファイルと認識し、キャッシュを使わずに再読み込みされるという点です。
上記の方法の問題としては、外部ファイルのコードを変更するたびに読み込み元のパラメータも変更する必要があります。
メリット
- 更新したときだけキャッシュをクリアできる
デメリット
- バージョン番号を毎回手動で変更する手間がある
自動でキャッシュを回避
パラメータを固定しつつ、キャッシュされないようにするには下記の方法があります。
<script src="file.js?p=(new Date()).getTime()"></script>
この方法では、読み込みごとに現在の日時(ミリ秒)がクエリとして付与されるため、クエリパラメータを変更しなくても、キャッシュが使われることはありません。
この方法の問題点としては、変更があってもなくても、キャッシュされないということです。キャッシュをコントロールしたい場合は、手書きのv=1方式が良いでしょう。
メリット
- 常に最新ファイルが読み込まれる
デメリット
- 常にキャッシュが無効