核心是静态资源用哈希文件名+immutable实现强缓存，HTML禁用强缓存启用协商；需正则精准匹配哈希文件、设expires 1y、add_header Cache-Control "public, immutable"、清空ETag；HTML配no-cache并保留ETag；location顺序须静态资源在前、SPA回退在后；CDN自动识别immutable失效旧缓存。
核心是让带 hash 的文件走强缓存，同时确保 HTML 每次都拉新——浏览器看到新文件名就自动弃用旧缓存，根本不需要“更新”它。
静态资源配长缓存 + immutable
匹配带哈希特征的文件（不只是后缀），统一设一年有效期并声明不可变：
- 用正则精准识别哈希文件，比如 location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|woff2|ttf|svg)$，避免把 debug.js 这类人工命名文件误加 immutable
- 加上 expires 1y; 提供兼容性 fallback
- 关键一步：add_header Cache-Control "public, immutable"; —— 告诉现代浏览器该 URL 内容永不变，跳过 If-None-Match 验证，直接复用磁盘缓存
- 显式清空 ETag：add_header ETag "";，防止 Nginx 默认基于修改时间生成的 ETag 干扰 CDN 或代理缓存判断
HTML 必须禁用强缓存，启用协商机制
index.html 是入口，它的路径不变，但内容必须及时更新，否则引用的新 hash 资源就无法加载：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 对根路径和所有 .html 文件单独配置：add_header Cache-Control "no-cache, must-revalidate";
- 配合 expires 1m; 或 expires -1;，避免强缓存锁死
- 保留 Nginx 默认开启的 ETag，让浏览器发起条件请求；服务端可返回 304（未修改）或全新 HTML
注意 location 匹配顺序与 fallback 安全
SPA 应用需支持前端路由，但不能让静态资源请求被错误 fallback 到 index.html：
立即学习“前端免费学习笔记（深入）”；
- 静态资源 location 块（如匹配 .js、.css、哈希文件）必须放在 location / 之前
- location / 中使用 try_files $uri $uri/ /index.html; 实现 SPA 回退，确保 /user/profile 这类路径由前端接管
- 若配置错序，/static/app.a1b2c3.js 可能被 fallback，绕过强缓存，导致性能下降甚至 404
代理层与 CDN 缓存不需主动清理
Nginx 不负责清 CDN 或中间代理的缓存，但可通过响应头让它们自然失效：
- CDN（如 Cloudflare、阿里云全站加速）识别 immutable 后，会跳过所有条件请求，长期缓存该 URL
- 新 hash 文件名对应全新 URL，天然不命中旧缓存键，旧内容自动失效
- 若 Nginx 自身做反向代理缓存，需自定义 proxy_cache_key，例如加入构建版本号或时间戳，避免不同发布版本共用同一缓存键
