53783


いつもお世話になっております。  
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

* * *

### 【質問の主旨】

CSSファイルについてバージョン管理をしているにも関わらず、ChromeのCacheストレージに同じ名前のファイルが格納されます。別々の名前で保存するためにはどうすれば良いでしょうか？

### 【質問の補足】

  1. CSSファイル(global.css)が変更されるたびにキャッシュ内でバージョンを更新したいと考えています。

[code]

    global.css
    
    更新前） a{color:#b28b60}
    ↓
    更新後） a{color:red}
    
[/code]

2.  
aタグのcolorプロパティ値を変えたときにindex.htmlのlinkタグを下記のように書きかえました。

[code]

    index.html
    
    更新前） <link rel="stylesheet" href="/css/global.css" type="text/css">
    ↓
    更新後） <link rel="stylesheet" href="/css/global.css?v=1" type="text/css">
    
[/code]

  3. 1と2に関するコードはGitHubの[history](https://bit.ly/2U8NUZI)に記述しています。

4.  
CSSが格納されているChromeのCacheストレージの様子は以下のように変化します

更新前） <http://takaiba.net/stackoverflow/stackoverflow20190328_1.png>  
↓  
更新後） <http://takaiba.net/stackoverflow/stackoverflow20190328_2.png>

5.  
今回の質問は[Webサイトパフォーマンス実践入門](https://www.shoeisha.co.jp/book/detail/9784798155098)という本のP238からP239までの内容に基づいて投稿しています。上述した補足の4では、`/css/global.css`が2つ格納されていますが、
**本の例では`/css/global.css`と`/css/global.css?v=1`がそれぞれ1つずつ格納されている** ことが図で示されています。

* * *

以上、ご確認よろしくお願い申し上げます。


CC BY-SA 4.0
2019-03-28T06:27:20.000
53782
2019-03-28T08:01:06.070
2019-03-28T07:56:10.743
30079
32232
question
javascript google-chrome google-chrome-devtools
ファイルを更新するたびにChromeのCacheストレージに異なる名前のファイル名を格納するためにはどうすれば良いでしょうか？


手元で試してみたところ、確かに`/css/global.css`がキャッシュに2つ格納された状態になりました。しかし、よく調べてみると、片方は実は`/css/global.css?v=1`であることが分かります。

[![Chrome
developerツールのキャプチャ画像](https://i.stack.imgur.com/ZCHZA.png)](https://i.stack.imgur.com/ZCHZA.png)

この画像のようにキャッシュされているファイルをクリックで選択し、下にある「Headers」をクリックするとそのキャッシュの情報を見ることができます。画像にあるように一番上に
**Request URL** が表示されており、これがキャッシュされているファイルのURLです。

調べてみると片方は`/css/global.css`でもう片方は`/css/global.css?v=1`であり、意図通りの動作になっていると思います。

参考文献の内容は確認していませんが、もし本の図と違っているならば、本が出版されてから現在までの間にChromeの動作が変わったのだと思います。


CC BY-SA 4.0
2019-03-28T08:01:06.070
53783
2019-03-28T08:01:06.070
30079
53782
answer