应配置1年强缓存+immutable：Nginx用正则匹配哈希文件（如.a-f0-9{8,}.(js|css|png|jpg|gif|webp|woff2|ttf|eot)），添加Cache-Control "public, max-age=31536000, immutable"、Last-Modified ""、etag off；HTML需短缓存，如Cache-Control "no-cache, must-revalidate"。
直接给带版本号或哈希的静态文件配“永久缓存”不现实，但可以设为**1年强缓存 + immutable**，效果接近永久——只要 URL 变了，浏览器就自动弃用旧缓存，根本不需要“清”。
确保资源本身带哈希或版本号
这是前提，Nginx 不生成哈希，得靠前端构建工具完成：
- Webpack：配置
output.filename: '[name].[contenthash:8].js'，生成类似app.3f9a2b1e.js - Vite：默认开启 content-hash 文件名，如
index.e4d8c2f3.css，无需额外配置 - HTML 中的引用必须由构建工具自动注入，不能手写固定路径，否则哈希失效
Nginx 匹配哈希路径并设置强缓存头
用正则精准匹配带哈希特征的文件（如含英文点+字母数字组合），避免误伤普通 CSS/JS：
- 推荐写法（放在
server或location /块内）：
add_header Cache-Control "public, max-age=31536000, immutable";
add_header Last-Modified "";
etag off;
>
-
immutable是关键：告诉浏览器“这个资源永远不会变”，跳过所有条件请求（If-None-Match / If-Modified-Since） -
etag off防止 Nginx 基于文件修改时间生成 ETag，干扰哈希语义 - 不用
expires，优先用add_header Cache-Control，语义更准、兼容性更好
HTML 必须短缓存或不强缓存
如果 HTML 也被强缓存，用户可能一直加载旧 HTML，里面还是老的 JS/CSS 地址，哈希就白加了：
- 对
.html文件单独配置：
add_header Cache-Control "no-cache, must-revalidate";
>
- 这样每次访问 HTML 都会重新拉取，确保拿到最新哈希链接
- 也可用
private, max-age=0，适合登录态页面
验证是否生效
打开浏览器开发者工具 → Network → 看某个 .js 请求的响应头：
- 应看到
Cache-Control: public, max-age=31536000, immutable - 没有
ETag或Last-Modified字段（被显式清空） - 第二次访问时状态码是
200 (from disk cache)，不是 304
