未引用已加载的Sprite文件，而是对同一文件发出请求

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;
 }

当我将元素的类名从is - gray更改为is - blue时，它会对同一个文件发出新请求。因此，几秒钟后加载背景图像，使UI看起来像破碎。

为什么会这样？我们将css加载到页面中的方式是否重要？我使用webpack1，这似乎只发生在生产版本中，而不是在开发版本中。浏览器不会缓存通过js注入css ??

加载的图像

Answer 1

发现了这个问题。它在响应头中的“缓存控制”属性。 Webpack的开发服务器正确设置响应头。但我的tomcat服务器没有。需要正确配置。

开发服务器的缓存设置

产品服务器（Tomcat）的缓存设置