Cache Busting(CSS,JavaScript)

古いwebアプリのメンテをよく押し付けられて
毎回処理内容の割には、サーバ負荷が高かったり全体的に非効率だったりするので
プログラム改修するよりもほぼノーリスクで行えるキャッシュについて、いつもやっているjs, cssの節約術を記載する事にする

毎回やってるものの、名称を知らなかったが「Cache Busting」というらしい
「きゃっしゅ、ばすてぃんぐ」
声にだして読むとなんだかかっこいい

参考にしたのは、これ

Cache Bustingとは

W3Cより

https://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html
これ！
キャッシュの正当性ってやつ
正当性とはいうもののなんだか挙動はいいかげんな気がするけども...

対応ブラウザ

ほとんど全部、たぶんIE11も大丈夫(確認してない)
詳しくは知らね

やり方

<!-- "v=xxxxx"の部分がキーポイント -->
<script src="./hogehogeScript.js?v=xxxxx"></script>
<!-- CSSもいける -->
<link href="style.css?v=xxxxx" rel="stylesheet">

"v=xxxxx"の部分は、YYYYMMDD形式の日時だったり
versionの番号だったり、用途に応じて使い分ける

まとめ

Cache Bustingはお手軽な割にリスクも少なく対象ブラウザも幅広なのでおすすめ
ただしhttp2となると、また対応方法が違ってくるかもしれないので注意が必要になる(かも)

似たようなキーワードとして"back-forward cache"っていうのがSafariにあるらしいが それはまたこんどの機会に

ハイパフォーマンスWebサイト 高速サイトを実現する14のルール [ スティーブ・サウダーズ ] 価格：1944円（税込、送料無料) (2018/6/30時点)