核心是按资源角色决定缓存行为：HTML 必须每次校验，禁用强缓存并设 no-cache, must-revalidate；带哈希的 JS/CSS/图片启用 immutable 长期缓存；普通静态资源设 30 天中期缓存。
核心是按资源角色决定缓存行为，而不是统一设个 max-age。HTML 必须每次校验，带哈希的 JS/CSS/图片可放心长期缓存，普通静态资源折中处理。
HTML 文件必须禁用强缓存
index.html 是前端入口，一旦被强缓存，后续 JS 路径更新就无法生效，容易导致白屏或报错。
- 精准匹配：用 location = /index.html 或 location ~* \.html$
- 响应头写清楚：add_header Cache-Control "no-cache, must-revalidate";
- 根路径也要覆盖：location = / { try_files /index.html =404; add_header Cache-Control "no-cache"; }
- 别只写
max-age=0，它仍可能触发条件请求；no-cache才强制校验
带哈希的静态资源启用 immutable 长期缓存
Webpack、Vite 生成的文件名含内容哈希（如 app.a1b2c3.js），说明 URL 不变则内容一定不变，这是用 immutable 的前提。
- 正则匹配哈希文件：location ~* "\.[a-f0-9]{8,}\.(js|css|png|jpg|svg|woff2?)$"
- 设置头：add_header Cache-Control "public, max-age=31536000, immutable";
-
immutable是关键：浏览器一年内连If-None-Match都不发，直接复用本地副本 - 可选加
expires 1y兼容旧协议，但优先级低于add_header
普通静态资源设中期缓存
未带哈希但变动较少的资源，如 logo.png、字体、第三方库（jquery.min.js），适合设 30 天缓存，兼顾性能与更新灵活性。
- 匹配后缀：location ~* \.(png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$
- 响应头：add_header Cache-Control "public, max-age=2592000";
- 不加
immutable，保留 ETag 或 Last-Modified 协商能力，手动更新后能快速生效 - 建议加 access_log off; 减少磁盘 IO
验证配置是否生效
上线后立刻用浏览器 DevTools Network 面板检查响应头：
- 打开页面 → 找到
index.html→ 确认Cache-Control是no-cache, must-revalidate - 找一个
app.xxxx.js→ 确认有immutable且max-age=31536000 - 手动改一行 HTML 再部署 → 清缓存重进 → 若仍是旧版，说明 location 优先级低或被其他配置覆盖（比如
^~块挡在前面）
