核心是通过哈希文件名（如app.a1b2c3.js）触发浏览器自动更新缓存，配合Cache-Control: public, max-age=31536000, immutable实现强缓存，同时HTML需禁用强缓存（no-cache, must-revalidate）并确保路径严格匹配。
核心是让浏览器缓存 CSS/JS，但内容一变就自动加载新版本——不是靠“清缓存”，而是靠 URL 变化 + 合理响应头组合。
用哈希文件名触发自然更新
构建时生成带 contenthash 的文件（如 app.a1b2c3.js、style.f456.css），这是最可靠的基础。Webpack/Vite 默认支持，HTML 中的引用也需同步更新（靠 HtmlWebpackPlugin 或构建插件自动完成）。Nginx 不需要重命名或转发，只需原样提供这些文件即可。
- 确保输出产物含哈希，且 HTML 中路径与之严格匹配
- 避免手动修改 JS/CSS 路径却漏改 HTML 引用，否则用户会 404
- 不建议用时间戳参数（如
?v=20260614），CDN 和代理可能忽略查询字符串
配强缓存头：public + max-age + immutable
对已指纹化的 CSS/JS，直接告诉浏览器：“这文件一年内绝不会变”，跳过所有验证请求（如 If-None-Match），既快又稳。
- 在匹配规则里加：
location ~* \.(js|css)$ { add_header Cache-Control "public, max-age=31536000, immutable"; } - 不要混用
expires 1y和add_header Cache-Control，后者优先级更高，易覆盖前者 - 用正则精准匹配，避免影响 HTML、API 等其他资源
单独管好 HTML 文件
HTML 是入口，它没哈希，必须每次访问都拉最新版，否则即使 JS 更新了，老 HTML 还在引用旧文件名。
立即学习“前端免费学习笔记（深入）”；
- 对
.html显式禁用强缓存：location ~* \.html$ { add_header Cache-Control "no-cache, must-revalidate"; } - CDN 层也要设
*.html不缓存，或最多缓存 1 分钟 - 避免用
no-store（完全禁存），除非有敏感信息；must-revalidate更平衡
上线后务必验证响应头
配置写完不等于生效，浏览器实际收到什么，才是关键。
- 打开 DevTools → Network → 刷新页面 → 点开一个
.js或.css请求 - 确认 Response Headers 里有：
Cache-Control: public, max-age=31536000, immutable - 用命令快速检查：
curl -I https://yoursite.com/app.abc123.js - 开发时关掉 Chrome DevTools 的 “Disable cache”，否则测试结果失真
