ファイルを更新するたびにChromeのCacheストレージに異なる名前のファイル名を格納するためにはどうすれば良いでしょうか?
いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
CSSファイルについてバージョン管理をしているにも関わらず、ChromeのCacheストレージに同じ名前のファイルが格納されます。別々の名前で保存するためにはどうすれば良いでしょうか?
【質問の補足】
- CSSファイル(global.css)が変更されるたびにキャッシュ内でバージョンを更新したいと考えています。
global.css
更新前) a{color:#b28b60}
↓
更新後) a{color:red}
2.
aタグのcolorプロパティ値を変えたときにindex.htmlのlinkタグを下記のように書きかえました。
index.html
更新前) <link rel="stylesheet" href="/css/global.css" type="text/css">
↓
更新後) <link rel="stylesheet" href="/css/global.css?v=1" type="text/css">
- 1と2に関するコードはGitHubのhistoryに記述しています。
4.
CSSが格納されているChromeのCacheストレージの様子は以下のように変化します
更新前) http://takaiba.net/stackoverflow/stackoverflow20190328_1.png
↓
更新後) http://takaiba.net/stackoverflow/stackoverflow20190328_2.png
5.
今回の質問はWebサイトパフォーマンス実践入門という本のP238からP239までの内容に基づいて投稿しています。上述した補足の4では、/css/global.css
が2つ格納されていますが、 本の例では/css/global.css
と/css/global.css?v=1
がそれぞれ1つずつ格納されている ことが図で示されています。
以上、ご確認よろしくお願い申し上げます。