html 文件的缓存控制必须通过服务端http响应头实现，meta标签无效；index.html需短缓存（如max-age=300或no-cache），静态资源应指纹命名并配长缓存与immutable。
HTML 文件本身不能靠 <meta> 控制缓存
你在 里写 <meta http-equiv="Cache-Control" content="no-cache"> 是无效的。现代浏览器（Chrome、Firefox、Safari、Edge）全部忽略这类声明，只认服务器返回的 HTTP 响应头。这是最容易踩的第一个坑：花时间调 <meta>，结果缓存行为完全没变。
真正起作用的是服务端配置，比如：
- Nginx 中用
add_header Cache-Control "public, max-age=3600" - Apache 的
.htaccess里用Header set Cache-Control "public, max-age=86400" - Express.js 里用
res.set('Cache-Control', 'no-cache')
index.html 必须短缓存，否则 JS/CSS 版本会错配
单页应用（SPA）部署时，index.html 是唯一入口，但它又依赖外部 .js 和 .css 文件。如果 index.html 被缓存太久（比如设了 max-age=31536000），而用户本地还存着旧版 HTML，它就会继续加载旧版 main.a1b2c3.js——哪怕你已发布新版 main.d4e5f6.js。
正确做法是给 HTML 设置极短缓存或强制验证：
-
Cache-Control: public, max-age=300（5 分钟） - 或更稳妥：
Cache-Control: no-cache（每次请求都走协商缓存，配合ETag或Last-Modified） - 绝对不要用
immutable——这个指令只适合指纹化命名的静态资源，对 HTML 入口毫无意义
静态资源（JS/CSS/图片）要用指纹 + 长缓存
文件内容不变时，浏览器复用缓存；内容变了，URL 必须变——这是可靠缓存的前提。所以构建工具（如 Webpack、Vite）生成的资源名通常是 main.7a2b3c.js 这种带哈希的形式。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
此时服务端可放心设置强缓存：
Cache-Control: public, max-age=31536000, immutable- Nginx 示例：
location ~* \.(js|css|png|jpg|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } -
immutable的作用是告诉浏览器：“只要 URL 没变，内容就肯定没变”，跳过后续的If-None-Match请求，省一次往返
协商缓存不是万能的，304 状态码仍需网络可达
很多人以为 Cache-Control: no-cache 就等于“离线可用”，其实不是。no-cache 表示“每次用前必须向服务器确认”，浏览器仍会发一个条件请求（带 If-None-Match 或 If-Modified-Since）。一旦断网，这个请求失败，页面就无法加载——HTTP 缓存不解决离线问题。
真要支持离线访问，得上 Service Worker，自己接管请求并决定从哪里取资源。但注意：Service Worker 本身也受 HTTP 缓存控制，它的 JS 文件必须用短缓存（比如 max-age=300），否则更新不了 worker 逻辑。
容易被忽略的一点：即使你设置了 ETag，如果服务器返回的 ETag 值每次都不一样（比如基于毫秒级时间戳生成），那协商缓存就形同虚设，浏览器永远收不到 304。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
