怎么在 Nginx 中处理 CSS 和 JS 的缓存过期问题

核心是让浏览器信任指纹化CSS/JS不会变，需配Cache-Control: public, max-age=31536000, immutable；HTML则必须用no-cache协商缓存，避免新HTML配旧JS导致白屏。

直接解决 CSS 和 JS 缓存不更新的核心，不是调短缓存时间，而是让浏览器“信任它不会变”——前提是文件名本身已带内容哈希（比如 app.8a3f2d.js、style.b4c9e1.css）。只要构建时生成了这类指纹文件，Nginx 就能放心配强缓存。

必须先确认：你的 JS/CSS 文件名是否含 contenthash？
Webpack 用 [contenthash]，Vite 默认开启，ESBuild 可配 --metafile + 插件。如果还是 app.js、style.css 这种固定名，后面所有缓存优化都会失效——浏览器根本分不清新旧版本。

对已指纹化的 CSS/JS，配 immutable 强缓存
在匹配 .js 和 .css 的 location 块里加这一行：

location ~* .(js|css)$ {    add_header Cache-Control "public, max-age=31536000, immutable";}

max-age=31536000 是一年秒数，immutable 是关键：它告诉现代浏览器（Chrome/Firefox/Edge）——这个资源一年内绝不会变，连条件请求（If-None-Match）都不用发，直接复用本地副本。性能提升明显，且避免 304 请求的网络开销。

别混用 expires 和 add_header Cache-Control
expires 1y 会同时写 Expires 和 Cache-Control: max-age，但如果你再用 add_header Cache-Control，后者会完全覆盖前者。统一用 add_header 更可控，也更符合现代规范。

HTML 必须单独处理，不能一起缓存
入口 HTML（如 index.html）哪怕只改一个字符，也会影响整个页面行为。它不能和 JS/CSS 共享缓存策略：

location = /index.html {    add_header Cache-Control "no-cache, must-revalidate";}location ~* .html$ {    add_header Cache-Control "no-cache";}

否则可能出现“新 HTML + 旧 JS”导致白屏或报错。

立即学习“前端免费学习笔记（深入）”；

验证是否生效，三步到位

• 打开浏览器开发者工具 → Network → 刷新页面
• 找一个带哈希的 .js 或 .css 文件，点开看 Response Headers
• 确认有 Cache-Control: public, max-age=31536000, immutable
• 再次刷新，状态码应为 200 (from memory cache) 或 (from disk cache)，不是 304

也可用命令快速检查：

curl -I https://yoursite.com/app.abc123.js

常见失效原因，盯住这几点

• Chrome DevTools Network 标签页勾选了 Disable cache → 关掉再测
• Nginx 用了 proxy_pass 回源，后端响应头被覆盖 → 加 proxy_ignore_headers Cache-Control;
• 构建产物没更新 HTML 中的引用路径 → 检查 index.html 里 <script src="app.xxxx.js"> 是否同步变了
• location 正则顺序不对，被更宽泛的规则覆盖 → 把 JS/CSS 规则放在靠前位置，或用 ^~ 提升优先级

不复杂但容易忽略。