Webページのcss、javascriptの変更を正しく反映させる為のキャッシュ対策

前に、ブラウザのキャッシュでWebページの修正が正しく反映されない場合にスーパーリロードするっていう方法を紹介しました。

develop.hateblo.jp

スーパーリロードを使えばキャッシュクリアして強制的にロードする事ができるので、最新のページの状態をロードできますが、自分以外の誰かが訪問した場合だと、スーパーリロードしてくれる人はなかなかいないと思いますし、キャッシュされているサイトの状態が最新のものだと判断されてしまう場合があります。
なので今回は今回はcssやjavascriptの変更を正しく反映させる為のキャッシュ対策をメモしておきたいと思います。

css、javascriptの変更を正しく反映させる為のキャッシュ対策

cssやjavascriptの変更を正しく反映させたい場合は、以下のようにcssやjavascriptのパス指定にパラメータをつけて、変更した場合にこのパラメータ変更して行けばいいようです。
パラメータをつけると、cssやjavascriptに変更があったと判断されてキャッシュを見ずに最新のファイルをロードしてくれます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
 <!-- css・javascriptにパラメータを付与する -->
<link rel="stylesheet" href="../common/css/common.css?100">
<script type="text/javascript" src="../common/js/common.js?200"></script>
</head>
<body>
</body>
</html>