キャッシュ問題について

Question

現在の悩みはCSSやJavaScriptファイルを修正してデプロイした後に、ブラウザのキャッシュが残っていて即座に反映されないことです。

ブラウザのキャッシュをクリアすることで問題は解決します。

しかし、他の人が見る場合でキャッシュが残っている場合は更新したことがわからず更新したCSSやJavaScriptが反映しないことが考えられます。

それを改善する為に私は考えました。
下記のようにGETパラメータをつけることで改善できると。

<script src="script.js?ver=20180604"></script>

参考文献です。
https://hodalog.com/cache-busting/

例えば、インクルードするファイルが１つであればすぐに修正はできるのですが複数、またはそのファイルが多数のファイルに適応される場合。
ひとつのファイルにまとめて@importのようにインクルードさせてGETパラメーターの管理が容易にすることができないのだろうかと考えています。

他に良い案や、詳しい手法・参考URLがありましたらお教え願えないでしょうか？

よろしくお願いします。

Comments

[maisumakun]

そのままHTML、CSS、JavaScriptを書いている感じでしょうか？ 何かしらのフレームワークを使っていますでしょうか？

[tester0101]

はい！そうです。

Answer 1

他に良い案や、詳しい手法・参考URL

キャッシュバスティングは毎回要求させる手法であり、ブラウザがキャッシュコントロールに対応しきれていなかった時代の手法になります(実はクエリ文字の異なる応答がキャッシュされているため、キャッシュ領域を圧迫しています)。

現在は、サーバー側でキャッシュ制御する方法を取り、「ブラウザにキャッシュさせつつも即座に更新できる」という運用が望ましいです。

「Webキャッシュの制御」「HTTPヘッダ ETag」などで検索してみてください。

Comments

[AkitoshiManabe]

Etag については、 https://teratail.com/questions/228232#reply-333526 でざっくりとした仕組みを回答したことがあります。

[tester0101]

ありがとうございます！どんぴしゃ回答です！検索してみます。