发布新版时浏览器自动加载新静态资源的关键是URL变更触发全新请求，配合Nginx强缓存头锁定新资源生命周期：构建阶段生成内容哈希文件名，HTML自动注入；Nginx按扩展名设expires 1y和immutable；index.html必须短缓存；部署脚本需校验并热重载Nginx配置。
发布新版时让浏览器自动加载新静态资源，关键不是“更新缓存”，而是让浏览器根本不用旧缓存——靠 URL 变更触发全新请求，再配合 Nginx 的强缓存头锁定新资源生命周期。整个过程无需手动清缓存、不依赖用户操作，自动化脚本只需管好两件事：构建生成带内容哈希的文件名，以及部署后热重载 Nginx 配置。
前端构建阶段：自动生成哈希文件名
这是自动化的起点。所有 JS/CSS/图片/字体等静态资源，必须在打包时嵌入内容哈希，使文件名随内容变化而变化。
- Webpack 中启用
contenthash（如[name].[contenthash:8].js），Vite 默认开启rollupOptions.output.entryFileNames哈希配置 - HTML 中的引用路径由构建工具自动注入，例如：
<script src="/js/app.7f3a2b.js"></script>，无需人工修改模板 - 避免用查询参数方式（如
app.js?v=1.2.0），CDN 或代理可能忽略参数导致缓存穿透失效
Nginx 配置阶段：按扩展名统一设强缓存头
不需要为每个哈希值单独写规则。Nginx 只需识别静态资源后缀，批量加缓存头即可，与具体哈希无关。
- 匹配常见静态类型：
location ~* \.(js|css|png|jpg|gif|webp|woff2|ttf|svg|ico)$ - 设置长期有效：
expires 1y;（即 max-age=31536000） - 启用 immutable：
add_header Cache-Control "public, immutable";，告诉浏览器该 URL 内容永不变，跳过协商请求 - 关闭日志减少 I/O：
access_log off;（可选但推荐）
HTML 入口必须短缓存或禁用强缓存
如果 index.html 被长期缓存，它里面引用的仍是旧哈希文件，整个更新链就断了。
- 精准匹配入口文件：
location = /index.html { expires -1; add_header Cache-Control "no-cache, must-revalidate"; } - 或统配所有 HTML：
location ~* \.html$ { expires 1m; add_header Cache-Control "no-cache"; } - 确保每次访问都向服务端确认 HTML 是否更新，拿到最新哈希引用
部署脚本中集成 Nginx 热重载验证
配置变更后必须立即生效，且不能中断服务。自动化脚本里应包含以下步骤：
- 执行
nginx -t校验语法，失败则中止部署 - 确认配置文件对 Nginx worker 用户（如
www-data）可读 - 运行
nginx -s reload，平滑重启，旧 worker 处理完请求后退出 - 用
curl -I检查典型资源响应头，确认含Cache-Control: public, immutable和Expires
