修正したcss、js、画像のキャッシュをクリアしてWEBページに反映させる方法

WEBページを更新することはよくあることだと思います。

そのなかで一番困るのが修正したけどクライアントから修正されていないと言われることだと思います。

僕も以前ありました。

クライアントから修正依頼をいただき修正してcssをアップしました。

ところが「修正されていません」を指摘をもらいました。

原因としてはcssのキャッシュで修正後のcssが反映されず修正前のcssが反映されている状態になります。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

cssキャッシュの解決策

キャッシュクリアの一つに「クエリストリング/GETパラメーター」というものがあります。

cssの後ろにパラメータをつける

<link type="text/css" rel="stylesheet" href="style.css">

修正したcssファイルが「style.css」だとします。

その後ろに下記のようにパラメータを付与してあげます。

<link type="text/css" rel="stylesheet" href="style.css?20210304">

ファイルを更新するたびにパラメータ部分を修正する必要がありますがパラメータ部分を修正することでブラウザがこれは新しいファイルだと認識してくれて新しいcssを反映してくれます。

画像のキャッシュクリア

cssファイル以外にも画像やjsもキャッシュをクリアさせることができます。

書き方はcssと同じです。

<img src="/images/img.jpg?20210304" alt="画像">

jsファイルのキャッシュクリア

次はjsファイルのキャッシュクリアです。

<script src="add.js?rev=20210304"></script>

パラメータにバージョンを付ける

下記の方法でもキャッシュクリアできます。

「?ver=〇〇」をバージョンをつけてキャッシュクリアすることができます。

<script src="add.js?ver=1.0.1"></script>

最後に

よく使われるのがやっぱり更新日時などをパラメータに入れて更新するのが多いかと思います。

またパラメータをつけるだけでなくファイル名にバージョンを付けたりファイルパスにバージョンを付ける方法もあります。

どれを使うかは管理しやすくわかりやすいものを選べばいいと思います。

コメント

タイトルとURLをコピーしました