html必须每次校验，禁用强缓存；带哈希的js/css/图片启用immutable长期缓存；普通静态资源设30天缓存；需验证响应头并排查location优先级。
关键不在“统一设缓存时间”，而在于按资源角色决定是否允许浏览器跳过验证——HTML 必须每次校验，JS/CSS/图片等静态资源可放心长期缓存。
HTML 文件必须禁用强缓存
index.html 是整个前端应用的入口和调度中心。一旦被强缓存，后续 JS/CSS 路径更新就无法生效，用户可能加载旧 HTML + 新 JS，导致白屏、报错或功能异常。
- 显式匹配所有 HTML 请求：
location ~* \.html$或更精确地location = /index.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强制校验更稳妥
带哈希的 JS/CSS/图片启用 immutable 强缓存
Webpack、Vite 等工具生成的文件名含内容哈希（如 app.a1b2c3.js），说明 URL 不变则内容一定不变。这是启用 immutable 的前提。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用正则精准匹配哈希格式：
location ~* "\.[a-f0-9]{8,}\.(js|css|png|jpg|svg|woff2?)$" - 设置：
add_header Cache-Control "public, max-age=31536000, immutable"; -
immutable是核心：浏览器在一年内连If-None-Match都不发，直接复用本地副本 - 可选加
expires 1y兼容 HTTP/1.0，但优先级低于add_header，建议以后者为准
普通静态资源设中期缓存（不加 immutable）
未带哈希但变动较少的资源，如 logo.png、字体文件、第三方库（如 jquery.min.js），适合设 30 天缓存，兼顾性能与更新灵活性。
- 匹配常见后缀：
location ~* \.(png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf|eot)$ - 设置：
add_header Cache-Control "public, max-age=2592000"; - 不加
immutable，保留 ETag 或 Last-Modified 协商能力，便于手动更新后快速生效 - 建议关闭访问日志：
access_log off;，减少磁盘 IO
验证配置是否生效
上线后立即用浏览器 DevTools Network 面板检查响应头：
- 打开页面 → 找到
index.html→ 查看Cache-Control是否为no-cache, must-revalidate - 找一个
app.xxxx.js→ 确认有immutable且max-age=31536000 - 手动改一行 HTML 再部署 → 清缓存重进 → 若仍是旧版，说明 location 优先级低或被其他配置覆盖（比如
include顺序问题）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
