HTML文件必须短缓存,否则浏览器不请求新HTML导致白屏或功能异常;正确响应头应为Cache-Control: no-cache, must-revalidate;immutable仅对带哈希的静态资源生效,需配合HTML不长缓存。

HTML 文件必须短缓存,否则新 JS/CSS 的哈希路径根本进不来,页面会白屏或功能异常——这不是资源没更新,而是浏览器压根没重新请求 HTML。
为什么 index.html 绝对不能设 max-age=31536000
SPA 入口 HTML 是“资源调度器”,它决定加载哪个带哈希的 app.a1b2c3.js。一旦服务端返回 Cache-Control: public, max-age=31536000,浏览器可能直接从磁盘读取旧 HTML(Network 面板显示 200 (from disk cache)),连请求都不发,自然拿不到新哈希路径。
- 常见错误现象:改完部署,用户刷新后仍是旧按钮、旧表单,甚至整个页面空白
- 本地开发也踩坑:Vue CLI / CRA 开发服务器默认内存缓存
index.html,改完不重启服务,本地也看不到效果 - 正确响应头应为:
Cache-Control: no-cache, must-revalidate或更直白的max-age=0, must-revalidate - 别用
private:CDN 节点会忽略它;也别用no-store:首屏性能受损,且对 HTML 不必要
Cache-Control: immutable 对静态资源到底起什么作用
immutable 不是让资源“永不变化”,而是告诉 Chrome 等现代浏览器:只要 URL 没变,就别发 If-None-Match 条件请求——省掉一次往返,提升加载速度。但它只在静态资源上生效,且依赖两个前提:文件名含内容哈希 + HTML 本身不被长缓存。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
- 构建时必须启用
contenthash(Webpack)或等效机制(Vite),避免内容不变但哈希乱变 - 服务端响应头需配对:
Cache-Control: public, max-age=31536000, immutable - 老旧 CDN 不支持
immutable?至少确保ETag与文件内容强绑定,并开启if_modified_since exact(Nginx) - 错误配置示例:
Cache-Control: public, max-age=31536000(缺immutable)→ 浏览器仍可能发条件请求,若ETag计算错,就返回 200 而非 304,重复下载
CDN 和 Service Worker 是最常被忽略的缓存层
就算你把 Nginx 配得再准,CDN 或 Service Worker 一插手,所有缓存策略都可能失效。
立即学习“前端免费学习笔记(深入)”;
- CDN 缓存策略必须和服务端响应头严格一致:如果源站返回
no-cache,但 CDN 后台单独给/index.html配了 10 分钟缓存,用户看到的就是 CDN 的旧 HTML - 调试时重点看两个头:
Cache-Control(确认是no-cache)和x-cache(Cloudflare)或x-cdn-cache(阿里云),看是否命中 CDN 及是否被覆盖 - Service Worker 是隐藏杀手:一旦注册并预缓存了
index.html,Ctrl+F5 和 Disable cache 全部失效——请求根本到不了网络层,直接从Cache Storage返回旧副本 - Workbox 默认预缓存
index.html,更新后必须触发 SW 更新逻辑,比如修改sw.js内容、调用skipWaiting()+clients.claim()
真正难的不是配对 Cache-Control,而是多层缓存(浏览器 → CDN → Service Worker)之间的一致性。任何一个环节漏掉,用户就卡在旧版本里——而且你本地测不出,因为没走那层缓存。


















