核心是区分资源类型：带哈希的静态资源启用immutable强缓存，html必须禁用强缓存；nginx通过正则匹配哈希文件名设max-age=31536000, immutable，普通静态资源设max-age=2592000，html统一设no-cache, must-revalidate。
核心是区分资源类型：带哈希的 JS/CSS/图片等静态资源走强缓存，HTML 入口文件必须禁用强缓存。关键不在“设多长”，而在于“谁该 immutable、谁必须每次校验”。
匹配带哈希的资源并启用 immutable
Webpack/Vite 打包生成的文件名含内容哈希（如 app.a1b2c3d4.js），说明内容不变则路径不变。Nginx 可据此放心设为不可变缓存：
- 用正则精准匹配哈希格式，避免误伤普通文件：
location ~* "\.[a-f0-9]{8,}\.(js|css|png|jpg|jpeg|gif|svg|webp|woff2?)$" - 设置
Cache-Control: public, max-age=31536000, immutable—— immutable 是重点，它让浏览器在一年内连条件请求（如 If-None-Match）都不发 - 可同时加
expires 1y作为 HTTP/1.0 兼容兜底
普通静态资源设合理长缓存
未带哈希但变动不频繁的资源（如 logo.png、字体文件），适合设 30 天级缓存，兼顾更新灵活性与性能：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 匹配常见后缀：
location ~* \.(png|jpg|jpeg|gif|svg|webp|ico|woff|woff2|ttf|eot)$ - 使用
public, max-age=2592000（30 天），不加 immutable，允许浏览器后续通过 ETag 或 Last-Modified 验证 - 建议关闭访问日志：
access_log off，减少磁盘 IO
HTML 文件必须禁用强缓存
index.html 是资源引用的“索引”，一旦被强缓存，新 JS/CSS 路径就无法生效，用户将看到白屏或旧功能：
- 对所有 HTML 显式控制：
location ~* \.html$ { add_header Cache-Control "no-cache, must-revalidate"; } - 根路径也需覆盖：
location = / { try_files /index.html =404; add_header Cache-Control "no-cache"; } - 避免写成
max-age=0，它仍可能触发条件请求；no-cache强制每次验证，更稳妥
验证是否生效
上线后立刻检查 Network 面板的响应头：
- 打开页面，找到
index.html→ 查看 Response Header 中Cache-Control是否为no-cache - 找一个
app.xxxx.js→ 确认有immutable且max-age是 31536000 - 手动改一行 HTML 再部署，清缓存重进 —— 若仍是旧版，说明 Nginx 的 HTML 缓存规则被其他配置覆盖（比如
include顺序错或 location 优先级低）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
