HTML文件本身不能靠模板缓存提速，真正起作用的是HTTP缓存策略；配错Cache-Control会导致用户卡在旧HTML里，哪怕JS/CSS已更新。
HTML 文件本身不能靠“模板缓存”提速，真正起作用的是 HTTP 缓存策略；配错 Cache-Control 会导致用户卡在旧 HTML 里，哪怕 JS/CSS 已更新。
为什么 index.html 绝对不能设 public, max-age=3600
这是线上最常踩的坑：静态资源（如 main.a1b2c3.js）可以长期缓存，但 index.html 是资源加载的入口，它一旦被缓存过久，浏览器就永远拿不到新版本的 HTML，也就不会去请求带新哈希的 JS/CSS。
- 动态页面（含登录态、实时数据）必须用
Cache-Control: no-cache或private, max-age=0, must-revalidate - 纯静态页（如文档站首页）可用
public, max-age=3600，但前提是所有内联资源路径都含内容哈希，且 CDN 路径规则明确绕过 HTML 缓存 -
no-store仅用于敏感页（如支付确认页），避免任何中间节点或本地磁盘留存
CDN 缓存和源站响应头必须严格一致
CDN 不是缓存开关，而是缓存放大器。如果源站返回 Cache-Control: no-cache，但 CDN 后台单独给 /index.html 配了 10 分钟缓存，用户看到的就是 CDN 的旧 HTML —— 源站早更新了也白搭。
- 调试时先看 Network 面板里 HTML 请求的
Response Headers→ 确认Cache-Control值是否符合预期 - 再看同个请求的
x-cache（Cloudflare）或x-cdn-cache（阿里云）→ 判断是否命中、是否被 CDN 覆盖 - CDN 控制台中，
/index.html类路径必须显式设为“绕过缓存”或 TTL ≤ 60s，不能依赖默认策略
meta http-equiv 对缓存完全无效
截至 2026 年 10 月，Chrome、Firefox、Safari、Edge 全部忽略 <meta http-equiv="Cache-Control"> 和 <meta http-equiv="Expires">。写它等于没写，还可能误导后续维护者。
立即学习“前端免费学习笔记（深入）”；
- 所有缓存控制必须落在 HTTP 响应头里，由服务器或反向代理（Nginx、Varnish）输出
- Webpack/Vite 构建工具生成的 HTML 是静态文件，缓存行为由 Web 服务器配置决定，不是 HTML 本身能控制的
- 若用 Express/Koa 等框架动态生成 HTML，需在路由响应中手动设置
res.set('Cache-Control', '...')
JS/CSS 缓存生效的前提是文件名带内容哈希
光配 Cache-Control: public, max-age=31536000 没用。如果 main.js 文件名不变但内容变了，浏览器会直接复用旧缓存，导致逻辑错乱。
- Webpack 需启用
contenthash，Vite 默认已做；输出应类似main.8f3a2d.js - Nginx 配置中，对
\.(js|css|png|jpg)$这类资源启用expires 1y+add_header Cache-Control "public, immutable" - HTML 中引用资源必须用构建后的真实文件名，不能硬编码
main.js—— html-webpack-plugin 或 Vite 的build.rollupOptions.output.entryFileNames会自动处理
最容易被忽略的一点：HTML 缓存时间越长，对 JS/CSS 路径哈希准确性的依赖就越强；一旦构建产物哈希出错或 HTML 引用未同步，缓存反而成为故障放大器。
