スプライトファイルが既に参照されていないロードされ、代わりに要求が同じファイル

Question

のために作られて、私はからの要素のクラス名を変更すると、私は

.is--stratus .icon__nav-threats.is--gray { 
    background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -41px; 
    width: 30px; 
    height: 30px; 
} 
.is--stratus .icon__nav-threats.is--blue { 
    background: url('/resources/img/navIcons_RiskInsight.png') no-repeat -1px -83px; 
    width: 30px; 
    height: 30px; 
} 

のようなCSSを持っている - 灰色にされる - ブルー同じファイルに対して新しい要求を行います。そのため、数秒後に背景画像が読み込まれ、UIが壊れたように見えます。

どうしてですか？私たちがCSSをページにロードする方法はここで重要ですか？私はwebpack1を使用して、これは、生産ビルドでのみ、devのビルドでは発生しないようです。ブラウザは、js注入されたCSSを介して読み込まれたイメージをキャッシュしませんか？

Answer 1

問題が見つかりました。レスポンスヘッダの 'cache-control'プロパティWebpackのdevサーバーは応答ヘッダーを適切に設定します。しかし、私のtomcatサーバーはありません。適切に設定する必要があります。

Devのサーバーのキャッシュ