でもこのままだと、例えば画像の配信で何かしらのキャッシュが設定されていた場合(Cache-ControlのHTTPヘッダーなど)に、画像を変更してもキャッシュが使用されてすぐに変更をクライアント側に反映できない。 そこでcache busteringを行う。URLの末尾に何かしらのクエリーストリングなどを付けて別のURLにすることで、ブラウザーのキャッシュを回避する方法だ。 上のように変更すれば、新しい画像がブラウザーに読み込まれるようになる。 でも画像の変更があるたびにいちいちCSSをいじるのは面倒なので、自動化したい。そこでPostCSSのプラグインであるPostCSS Cachebusterを使ってみる。 導入は簡単に yarn add -D postcss-cachebuster なり npm install --save-dev postcss-cachebuster なりで。