質問: いつもお世話になっております。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 --- ### 【質問の主旨】 CSSファイルについてバージョン管理をしているにも関わらず、ChromeのCacheストレージに同じ名前のファイルが格納されます。別々の名前で保存するためにはどうすれば良いでしょうか? ### 【質問の補足】 1. CSSファイル(global.css)が変更されるたびにキャッシュ内でバージョンを更新したいと考えています。 ``` global.css 更新前) a{color:#b28b60} ↓ 更新後) a{color:red} ``` 2. aタグのcolorプロパティ値を変えたときにindex.htmlのlinkタグを下記のように書きかえました。 ``` index.html 更新前) ↓ 更新後) ``` 3. 1と2に関するコードはGitHubのhistoryに記述しています。 4. CSSが格納されているChromeのCacheストレージの様子は以下のように変化します 更新前) ↓ 更新後) 5. 今回の質問はWebサイトパフォーマンス実践入門という本のP238からP239までの内容に基づいて投稿しています。上述した補足の4では、`/css/global.css`が2つ格納されていますが、 **本の例では`/css/global.css`と`/css/global.css?v=1`がそれぞれ1つずつ格納されている** ことが図で示されています。 --- 以上、ご確認よろしくお願い申し上げます。
回答: 手元で試してみたところ、確かに`/css/global.css`がキャッシュに2つ格納された状態になりました。しかし、よく調べてみると、片方は実は`/css/global.css?v=1`であることが分かります。 !Chrome developerツールのキャプチャ画像 この画像のようにキャッシュされているファイルをクリックで選択し、下にある「Headers」をクリックするとそのキャッシュの情報を見ることができます。画像にあるように一番上に**Request URL**が表示されており、これがキャッシュされているファイルのURLです。 調べてみると片方は`/css/global.css`でもう片方は`/css/global.css?v=1`であり、意図通りの動作になっていると思います。 参考文献の内容は確認していませんが、もし本の図と違っているならば、本が出版されてから現在までの間にChromeの動作が変わったのだと思います。