html需每次校验,设no-cache, must-revalidate;js/css带哈希可设public, max-age=31536000, immutable;图片字体等静态资源设max-age=2592000;音视频及第三方库需谨慎处理。

不同文件类型该缓存多久,不是拍脑袋决定的,而是由它的更新规律和业务角色决定的。HTML 必须每次校验,JS/CSS 带哈希就可放心缓存一年,图片字体这类静态资源适合设 30 天到 1 年,而音视频或第三方库则要更谨慎。
HTML 类资源:禁用强缓存,强制校验
入口 HTML(如 index.html)哪怕只改一行,也会影响整个页面行为。浏览器若强缓存它,就会加载旧 HTML + 新 JS,极易白屏或报错。
- 统一匹配所有 HTML 请求:location ~* \.html$ 或更精准地 location = /index.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 才真正强制校验
JS/CSS/字体等构建产物:启用 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、fonts/roboto.woff2、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 优先级低,或被其他配置(如 include 顺序)覆盖











