Help us understand the problem. What is going on with this article?

Js/CSSのキャッシュをコントロール

js/cssをブラウザでキャッシュさせない方法

Cahche Bustingって言うらしい。。。

その方法は、以下の通り

対策前のコード↓

sample.html
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg" alt="Sample">

対策後コード↓

sample.html
<!-- CSS -->
<link href="style.css?ver=1.0.0" rel="stylesheet" type="text/css">
<!-- JavaScript -->
<script src="script.js?ver=1.0.0" type="text/javascript" ></script>
<!-- 画像 -->
<img src="sample.jpg?ver=1.0.0" alt="Sample">

「?」の後に任意の文字列を付与すると、ブラウザは対策前のURLとは違うものだと認識する。
(これをクエリ文字列という)

クエリ文字列はほかにも
・更新日時 (例:src=”style.css?date=20201027053000″)
・バージョン (例:src=”style.css?ver=1.2.3″)
・ランダム数

jsやcss側での加工はと言うと、必要ない

これでjs/cssを更新しても、ブラウザでキャッシュされなくなる。
しかし、htmlがキャッシュされたら元も子もないので、htmlには以下のmetaを記述する。

sample.html
<head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

3つともキャッシュしちゃダメよ!ということらしい。

以上。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away