关键在于构建、HTML引用与Nginx缓存策略三者对齐：Webpack/Vite生成contenthash文件名（如main.7a2b9c1d.js），HTML自动注入新路径，Nginx用正则匹配哈希资源并设immutable强缓存，同时/index.html必须no-cache且禁用ETag与Last-Modified。
Linux 下 Nginx 配合前端打包工具的文件哈希值实现“完美缓存更新”，关键不是让 Nginx 去识别或计算哈希，而是让构建产出、HTML 引用、Nginx 缓存策略三者对齐：哈希变 → URL 变 → 浏览器认新资源 → Nginx 给强缓存 → HTML 确保拉新链接。
构建阶段必须生成内容哈希文件名
这是整个机制的起点。Nginx 不生成哈希，它只响应请求；哈希必须由 Webpack、Vite 或 Rollup 在打包时注入文件名中。
- Webpack：配置 output.filename: '[name].[contenthash:8].js'，生成如
main.7a2b9c1d.js - Vite：默认开启 content-hash，输出类似
index.e4f5g6h7.css，无需额外配置 - 确保 HTML 中的
<script>和<link>标签由构建插件（如 HtmlWebpackPlugin 或 Vite 的 index.html 处理）自动注入，不能手写固定路径
Nginx 精准匹配哈希资源并设强缓存
用正则识别带哈希特征的文件（如含 8 位以上十六进制串），避免把普通 app.js 也误设为长缓存：
linux-performance-analyzer
下载
Linux 性能分析与调优专家，覆盖 CPU、内存、磁盘 I/O、网络、内核参数、编译优化、容器/K8s。适用场景：系统卡顿/高负载、内存不足/OOM/Swap 高、CPU 异常/iowait 高。
- 推荐写法（更安全）：
location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|gif|webp|woff2|ttf|eot)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Last-Modified "";
etag off;
} -
immutable是核心：告诉浏览器“这个 URL 对应的内容永不变”，跳过所有协商请求（If-None-Match等），加载更快也更确定 -
etag off和清空Last-Modified是必须项，防止 Nginx 基于文件修改时间干扰哈希语义
HTML 必须短缓存或不缓存
HTML 是入口，它没哈希，但里面藏着 JS/CSS 的新 URL。如果它被缓存，用户就永远加载不到新资源。
- 精准控制入口文件：
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
} - 若用 SPA 路由，还需搭配
try_files $uri $uri/ /index.html;，但该配置要放在静态资源 location 之后，防止 JS/CSS 请求被错误 fallback - CDN 用户需同步设置
*.html缓存时间为 0 或 1 分钟，否则 CDN 层会拦截掉 Nginx 的响应头
上线后验证与热重载
配完不验证等于没配。每次部署后都要确认实际响应头是否生效：
- 用命令行快速检查：
curl -I https://your.site/static/app.1a2b3c4d.js
看返回中是否有Cache-Control: public, max-age=31536000, immutable，且无ETag或Last-Modified - 修改 Nginx 配置后，先运行
nginx -t检查语法，再执行nginx -s reload热重载，不中断现有连接 - 确保 Nginx worker 进程用户（如
www-data）对静态文件目录有读取权限，否则可能 403
