HTML文件本身不能靠模板缓存提速，真正起效的是HTTP缓存；配public,max-age=3600会导致用户加载旧HTML、按钮失效、JS不生效，应改用no-cache或max-age=0,must-revalidate，并确保静态资源通过内容哈希+immutable长期缓存。
HTML 文件本身不能靠“模板缓存”提速，真正起作用的是浏览器对 index.html 的 HTTP 缓存——但多数人一上来就配错，结果用户反复加载旧页面、按钮点不动、JS 脚本不生效，还以为是构建工具或 CDN 出了问题。
为什么给 index.html 配 public, max-age=3600 是高危操作
这个配置会让浏览器在 1 小时内完全跳过网络请求，直接读磁盘缓存。问题在于：index.html 通常包含动态内容（如用户昵称、未读数）、引用路径（如 main.js）或结构变更（如删掉某个 div）。一旦缓存了旧 HTML，哪怕你已上线新 JS、改了文案、修复了 bug，用户也看不到。
- CDN 或反向代理若也缓存了该 HTML，问题会被放大：边缘节点返回旧 HTML，而用户本地可能还缓存着更早版本的 JS，造成资源错配
- 前端路由（如 React Router）依赖 HTML 入口文件完整性，缓存过期 HTML 可能导致白屏或 404
-
max-age=3600在登录后仪表盘页、订单详情页等场景下，极易暴露过期数据（例如显示“昨日订单”，实际已是今日）
index.html 应该用 no-cache 还是 max-age=0, must-revalidate
两者都强制每次访问走协商缓存（发请求，服务端比对后返回 304 Not Modified），但行为细节不同：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
no-cache：语义是“可缓存，但必须验证”，浏览器会自动带上If-None-Match（配合ETag）或If-Modified-Since（配合Last-Modified）；现代服务端（Nginx、Express、Next.js）默认支持，兼容性好 -
max-age=0, must-revalidate：更明确地禁止复用过期响应，且要求验证失败时不能降级使用旧缓存；某些老旧网关或中间件对此处理更严格 - 别用
private：CDN 节点会忽略它，如果你用 Cloudflare 或阿里云 CDN，设了private等于没设 - 绝对不要用
<meta http-equiv="Cache-Control" content="...">：Chrome/Firefox/Edge 已完全不认，仅部分 WebView 可能降级生效，不可靠
静态资源（JS/CSS/图片）必须和 HTML 缓存策略解耦
提速的关键不在 HTML，而在它引用的资源——这些文件体积大、变动少、适合长期缓存。但前提是路径带内容哈希，否则缓存再久也没用。
立即学习“前端免费学习笔记（深入）”；
- Webpack 需启用
contenthash，Vite 默认开启；输出应为main.a1b2c3.js而非main.js - Nginx 示例配置：
location ~* \.(js|css|woff2|png|jpg|gif)$ { expires 1y; add_header Cache-Control "public, immutable"; }其中immutable告诉浏览器“此 URL 永远不变”，后续访问可跳过验证请求，省一次 RTT - HTML 文件本身仍需单独配置，例如：
location = /index.html { add_header Cache-Control "no-cache"; }不能和静态资源共用同一段location规则 - 如果用了 Gzip 或 Brotli，务必在 Nginx 中开启：
gzip on;或brotli on;，HTML 体积通常能压到原大小的 30%～50%
调试时最容易被忽略的三个点
很多人调完以为 OK，上线后才发现缓存没生效，或者生效得不对。核心问题往往藏在这几个地方：
- 检查 DevTools Network 面板里
index.html的响应头，确认Cache-Control确实是服务端返回的，而不是由 CDN 后台面板“自动注入”的（有些 CDN 控制台默认开启 HTML 缓存，会覆盖你 Nginx 的配置） - 看
x-cache（Cloudflare）或x-cdn-cache（阿里云）响应头，确认是否命中 CDN 缓存；如果 CDN 返回HIT但浏览器没缓存，说明 CDN 层策略和服务端冲突 - 本地开发时，
html-webpack-plugin的cache: true只加速构建，不影响浏览器缓存行为；别把它和线上缓存混为一谈
