应配置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 /块内）：
location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|gif|webp|woff2|ttf|eot)$ {<br> add_header Cache-Control "public, max-age=31536000, immutable";<br> add_header Last-Modified "";<br> etag off;<br>>-
immutable是关键：告诉浏览器“这个资源永远不会变”，跳过所有条件请求（If-None-Match / If-Modified-Since） -
etag off防止 Nginx 基于文件修改时间生成 ETag，干扰哈希语义 - 不用
expires，优先用add_header Cache-Control，语义更准、兼容性更好
HTML 必须短缓存或不强缓存
如果 HTML 也被强缓存，用户可能一直加载旧 HTML，里面还是老的 JS/CSS 地址，哈希就白加了：
- 对
.html文件单独配置：
location ~* \.html$ {<br> add_header Cache-Control "no-cache, must-revalidate";<br>>- 这样每次访问 HTML 都会重新拉取，确保拿到最新哈希链接
- 也可用
private, max-age=0，适合登录态页面
验证是否生效
打开浏览器开发者工具 → Network → 看某个 .js 请求的响应头：
- 应看到
Cache-Control: public, max-age=31536000, immutable - 没有
ETag或Last-Modified字段（被显式清空） - 第二次访问时状态码是
200 (from disk cache)，不是 304
