如何阻止Chrome在静态资源更新时仍使用磁盘缓存？

核心问题出在入口文件index.html的缓存策略配置错误——你已经为JS/CSS配置了contenthash，但HTML文件被浏览器过度缓存，导致新标签打开时直接加载旧缓存的HTML，其中引用的仍是旧哈希值的JS文件，最终出现白屏问题。

1. 调整Nginx缓存配置 #

针对不同类型的文件设置差异化缓存策略：

配置示例 #

# 处理入口HTML文件：强制每次请求都与服务器验证资源是否更新
location = /index.html {
    root /path/to/your/static/directory; # 替换为你的静态文件根路径
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

# 处理带contenthash的静态资源（JS/CSS/图片等）：设置长期缓存
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
    root /path/to/your/static/directory;
    add_header Cache-Control "public, max-age=31536000, immutable";
    etag on; # 保留Etag验证，可选（Nginx默认开启）
}

配置说明 #

• index.html：使用no-cache并非完全禁止缓存，而是强制浏览器每次请求都先向服务器验证资源是否更新（对比Etag/Last-Modified），确保能获取最新的HTML内容。
• 静态资源（JS/CSS等）：因为文件名包含contenthash，内容变更时文件名必然改变，所以可以设置1年的超长缓存周期，并添加immutable标记，告诉浏览器该资源一旦缓存就无需再发起验证请求，提升加载性能。

2. 验证配置效果 #

部署修改后的Nginx配置后，通过Chrome开发者工具验证：

1. 打开Network面板，勾选「Disable cache」以外的选项
2. 新标签输入域名回车，查看index.html的响应头：
   • 确认Cache-Control字段为no-cache, no-store, must-revalidate
   • 确认index.html的加载来源为服务器（而非disk cache）
3. 检查加载的JS文件是否为新哈希版本

3. 关于刷新行为的差异解释 #

• 普通刷新（F5）：浏览器会对所有资源发送验证请求（携带If-None-Match/If-Modified-Since头），因此能触发index.html的更新验证，拿到新内容。
• 新标签直接访问：Chrome会优先使用磁盘缓存的HTML（若旧配置允许长期缓存），跳过服务器验证，导致加载旧资源。

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