HTML文件不应设长缓存（如max-age=31536000），因其为动态入口，长期缓存易致HTML与JS/CSS版本错配，引发白屏、404或交互失效；应配no-cache,must-revalidate确保每次验证。
HTML 文件不该设最长有效期
HTML 文件（如 index.html）通常**不能也不应该**设置长缓存（比如 max-age=31536000），哪怕你只是想“一劳永逸”。它不是静态资源，而是应用入口，一旦缓存太久，用户就可能加载到旧 HTML，再配合新版本的 JS/CSS，直接导致白屏、交互失效或样式错乱——尤其在 SPA 场景下，这是线上事故高发点。
常见错误现象：
- 改完 JS 逻辑，用户刷新页面仍执行老代码
- Vue/React 应用路由跳转失败，控制台报
Cannot find module './chunk-xxx.js' - DevTools Network 面板里
index.html显示200 from disk cache，但后续 JS 请求 404
Cache-Control max-age=31536000 只适用于指纹化静态资源
max-age=31536000（一年）是给带哈希后缀的资源用的，比如 main.a1b2c3.js、styles.f4e5d6.css。这类文件内容不变则哈希不变，变则文件名彻底不同，所以可放心长期缓存。
对 HTML 来说，没有自动重命名机制，你无法保证“内容没变”——每次构建都可能更新内联脚本、动态 src 地址、meta 标签或 CSP 策略。所以必须让浏览器每次请求都做校验或强制重新获取。
立即学习“前端免费学习笔记（深入）”；
推荐配置方式（按环境）：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- Nginx：
location = /index.html { add_header Cache-Control "no-cache, must-revalidate"; } - Apache：
Header set Cache-Control "no-cache, must-revalidate" "expr=%{REQUEST_URI} =~ m|^/index\.html$|" - Express：
app.get('/index.html', (req, res) => { res.set('Cache-Control', 'no-cache, must-revalidate').sendFile('./index.html'); }); - Vercel：
_headers文件中写/index.html→cache-control: no-cache
为什么不用 max-age=0 替代 no-cache
max-age=0 表示强缓存立即过期，浏览器会走协商缓存流程（发 If-None-Match 或 If-Modified-Since）。但它不强制校验——如果服务端没返回 ETag 或 Last-Modified，浏览器可能直接复用本地副本，行为不可控。
no-cache 才是语义明确的选择：它告诉浏览器“你可以存，但每次用前必须和服务端确认是否有效”，无论服务端有没有提供验证头，都会触发条件请求。
注意：不要混用 no-cache 和 max-age=0。两者语义冲突，且 no-cache 已隐含“不信任强缓存”，加 max-age=0 属于冗余甚至误导。
真要“最长有效期”，唯一安全路径是文件名哈希化
如果你坚持想让 HTML “永久缓存”，唯一可行方案是：把 index.html 构建成带哈希的唯一文件（如 index.8a7b6c.html），并在所有入口（CDN 配置、Nginx try_files、CNAME 解析）指向它。同时确保该文件内容真正不变——即所有 JS/CSS 路径也全为绝对哈希地址，且构建过程锁定。
这在实践中极难维持：HTML 往往含时间戳、环境变量、动态 meta、埋点脚本等。稍有变动就得生成新文件，而旧链接就彻底失效。所以绝大多数项目根本不走这条路。
真正容易被忽略的一点：很多人在本地用 file:// 协议打开 HTML 测试，发现 <meta http-equiv="Cache-Control"> 像是“生效了”，其实那只是开发时的假象——HTTP 缓存头根本没传输，浏览器压根没收到，更不会执行任何缓存逻辑。上线前务必用真实 HTTP 服务验证。
