如何配置IIS在缓存失效检查中包含子资源，解决图片缓存更新问题？

核心问题解析 #

你的场景里，浏览器缓存旧图片的本质是：静态资源（图片）的缓存策略与index.html独立，即便index.html每次都被校验是否新鲜（max-age=0），但图片URL未变时，浏览器会优先使用本地缓存，不会主动向服务器校验图片是否更新——除非缓存过期或用户强制刷新。

纯IIS配置优化方案 #

以下两种IIS配置可以提升缓存校验的有效性，但无法完全解决“URL不变时普通刷新触发新图”的问题：

1. 确保静态资源启用ETag与Last-Modified校验 #

IIS默认会为静态资源生成ETag和Last-Modified响应头，但需确认配置未被禁用：

• 打开IIS管理器，进入站点的HTTP响应头设置，确认ETag功能处于启用状态。
• 或通过web.config强制配置：

<system.webServer>
  <staticContent>
    <!-- 设置合理的缓存时长，比如7天 -->
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" />
    <!-- 明确启用ETag，若此前被禁用可添加该配置 -->
    <etag enabled="true" />
  </staticContent>
</system.webServer>

当图片更新时，Last-Modified和ETag值会自动变化。浏览器后续请求图片时，会携带If-Modified-Since/If-None-Match头，IIS对比后会返回新图片内容或304 Not Modified。

2. 配置must-revalidate缓存规则 #

在web.config中为静态资源添加must-revalidate指令，要求浏览器缓存过期后必须校验资源新鲜度：

<system.webServer>
  <staticContent>
    <clientCache 
      cacheControlMode="UseMaxAge" 
      cacheControlMaxAge="7.00:00:00" 
      cacheControlCustom="must-revalidate" 
    />
  </staticContent>
</system.webServer>

这个配置能确保缓存过期后，浏览器必须向服务器校验资源状态，但在缓存有效期内，普通刷新仍不会触发校验。

为什么追加查询参数（或内容哈希命名）是最优解 #

纯IIS配置存在本质局限：

• 普通刷新（F5）时，浏览器不会主动校验未过期的静态资源，仅当URL变化时才会视为新资源重新请求。
• 不同浏览器的缓存行为存在差异，部分浏览器会严格遵循缓存策略，不会因index.html更新而联动检查关联静态资源。

而追加查询参数（如img/header.png?v=20240520）或使用内容哈希命名资源（如header.abc123def.png），本质是通过改变URL让浏览器完全绕过旧缓存，直接请求新资源。这是前端静态资源更新的行业通用方案，可靠性和兼容性都拉满，是当前场景下的最优解。

内容的提问来源于stack exchange，提问作者Jan Vos