Azure CDN缓存index.html问题：自动规避旧版本缓存的最佳实践

核心问题拆解 #

问题根源在于静态资源的缓存策略失衡：静态资源（JS/CSS/图片等）需要长缓存提升性能，但index.html作为入口文件，一旦被CDN长期缓存，内容更新后用户无法及时获取新版本。手动清除缓存只是临时补救，绝非长期高效方案。

最优解决方案：分资源制定缓存策略 + 静态资源版本化 #

1. 给非入口静态资源加版本哈希 #

将JS、CSS、图片等非index.html的资源文件名自动添加内容哈希（比如app.7f9d2b.js、logo.a1c3e5.png），主流构建工具（Webpack、Vite、Gulp等）都支持自动生成这类带哈希的文件名。

• 每次资源内容更新时，文件名会同步变化，CDN会自动识别为新资源并拉取，旧版本缓存会自然过期，完全无需手动清理。
• 这类资源可以设置超长缓存TTL（比如30天甚至1年），最大化利用CDN性能。

2. 给index.html配置差异化缓存规则 #

在Azure CDN中单独对index.html设置缓存策略：

• 方案一：设置较短的TTL（比如5-15分钟），平衡缓存效率和更新及时性；
• 方案二：配置Cache-Control: no-cache, must-revalidate，让浏览器每次请求都向CDN验证资源有效性，CDN会自动回源检查最新版本，确保用户总能获取到更新后的内容。

3. 用Azure CDN缓存规则批量配置 #

通过Azure门户或CLI创建缓存规则：

• 匹配路径/index.html，设置低TTL或缓存验证规则；
• 匹配路径/*.js、/*.css、/*.png等静态资源，设置长TTL并开启「忽略查询字符串」，避免因无关参数导致重复缓存。

备选方案：构建流程自动触发精准缓存清除 #

如果暂时无法实施资源版本化，可以将缓存清除步骤整合进构建流水线：

• 使用Azure CLI命令仅清除index.html的缓存（避免全量清除影响CDN性能），示例命令：

  az cdn endpoint purge --resource-group <你的资源组名称> --profile-name <CDN配置文件名称> --name <CDN端点名称> --content-paths "/index.html"
  

• 注意：只清除必要路径，不要全量清除CDN缓存，否则会导致大量回源请求，降低CDN服务效率。

方案优先级总结 #

1. 静态资源版本化 + 差异化缓存策略（最推荐，从根源解决问题，无额外运维成本）；
2. 构建流程自动清除特定路径缓存（适合临时过渡或无法版本化的场景）；
3. 手动清除缓存（仅用于紧急故障排查，不适合频繁更新场景）。

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