核心是通过构建阶段生成带内容哈希的文件名（如app.a1b2c3.js），配合Nginx对静态资源设1年缓存+immutable，HTML走短缓存并启用协商缓存，确保浏览器只认新URL、不读旧缓存。
核心是让浏览器只认新 URL、不碰旧缓存，靠构建阶段生成带内容哈希的文件名（如 app.a1b2c3.js），再由 Nginx 统一配长缓存 + immutable，HTML 则走短缓存确保入口及时更新。
用内容哈希锁定资源唯一性
Webpack/Vite 等工具开启 contenthash，使 JS/CSS/图片等文件名随内容自动变化。例如：main.a1b2c3d4.js → 内容一改，URL 就变，浏览器视作全新资源，天然绕过所有本地缓存。
- HTML 中引用路径必须同步更新，构建工具会自动处理，无需手动改模板
- 避免仅加查询参数（如
?v=1.2.0），CDN 或代理可能忽略参数导致缓存失效 - 哈希文件名本身是“版本号”的替代方案，比路径里写
/v1.2.0/更轻量、更可靠
对哈希资源设 1 年缓存 + immutable
Nginx 不需识别具体哈希值，只需按后缀匹配并统一加强缓存头：
- 在
location块中匹配静态扩展名：js|css|png|jpg|woff2|ttf|ico|svg - 配置
expires 1y;，同时加add_header Cache-Control "public, immutable"; -
immutable是关键：告诉现代浏览器该资源永不变，跳过If-None-Match校验，直接复用磁盘缓存
HTML 必须禁用强缓存，启用协商机制
HTML 是入口，不能缓太久，否则用户永远看不到新版页面结构：
- 单独匹配
.html路径，设expires -1;或expires 1m; - 加上
add_header Cache-Control "no-cache, must-revalidate"; - 保留默认 ETag（Nginx 默认开启），让浏览器发起条件请求，服务端可返回
304 Not Modified或新内容
发布后验证与兜底保障
上线不是配完就完事，需确认响应头生效、旧路径收敛、异常可追溯：
- 用
curl -I https://site.com/js/app.a1b2c3.js检查是否含Cache-Control: public, immutable和Expires字段 - 浏览器 Network 面板看二次访问是否显示
200 (from disk cache)，非304或200重新下载 - 若前端尚未全量切到新路径，可在 Nginx 中用
rewrite+try_files兜底旧请求，防止 404
