html必须设no-cache或max-age=0,must-revalidate以确保每次验证更新，因其作为动态入口内容常变；静态资源则需文件名哈希+cache-control: public, immutable, max-age=31536000实现强缓存。
HTML本身不能被“缓存住再反复用”，真正该缓存的是它引用的静态资源（css、js、img等），而index.html这类入口文件通常要禁用强缓存或设极短有效期——否则改了JS文件名，用户刷新却还在用旧HTML，根本加载不到新资源。
为什么不能给HTML设长期缓存
浏览器对index.html启用强缓存后，只要没过期，就完全不发请求；哪怕你已部署新版main.20261013.js，旧HTML仍会尝试加载main.1234.js，导致白屏或报错404。这不是缓存太强的问题，是缓存策略错配。
- HTML是“调度员”，内容常变（比如时间戳、用户状态、AB测试分支），必须每次校验
- 静态资源才是“不变的资产”，适合用
Cache-Control: public, immutable, max-age=31536000 - 若真要缓存HTML（如博客文章页），必须配合服务端生成带ETag或Last-Modified的响应头，启用协商缓存
静态资源怎么加版本号才有效
光在文件名里写v1.2.3没用，得让构建工具自动注入哈希值——否则手动改，漏一个就断链。Webpack/Vite默认支持[contenthash]，生成类似app.a1b2c3d4.js的文件名。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保HTML中引用的路径也同步更新，比如
<script src="/static/app.a1b2c3d4.js"></script> - 不要用
?v=1.2.3这种查询参数：CDN和部分代理可能忽略它，不视为新资源 - 如果用CI/CD发布，检查构建产物是否真的重命名了文件，且HTML模板被正确替换
Cache-Control指令组合的实际效果
Cache-Control不是越长越好。不同资源类型要区别对待：
-
html：设no-cache（强制协商）或max-age=60（最多缓存1分钟），避免 stale HTML -
js/css：用public, immutable, max-age=31536000——immutable告诉浏览器“此资源永不变更”，即使用户点F5也不重新验证 -
图片/字体：可设max-age=31536000，但别加immutable，因为有些CDN不支持该指令 - 注意：
private会让CDN跳过缓存，只适用于含用户敏感数据的资源
本地开发时缓存干扰调试怎么办
开发服务器（如Vite、Webpack Dev Server）默认禁用缓存，但有时仍会意外命中磁盘缓存，尤其用localhost访问时。
- Chrome开发者工具 → Network标签页 → 勾选
Disable cache（仅DevTools打开时生效） - 在HTTP响应头中临时加
Cache-Control: no-store，彻底禁止任何缓存 - 避免用
file://协议打开HTML——此时浏览器不发HTTP请求，缓存机制失效，行为不可预测 - 真要测缓存逻辑，必须走
http://localhost:3000或真实域名
最常被忽略的一点：缓存策略生效的前提是服务器真的发出了对应响应头。Nginx配置写了expires 1y，但如果location匹配错了路径，或者被上游代理覆盖了头部，那一切设置都白搭。上线前务必用curl -I https://yoursite.com/static/main.js确认实际返回的Cache-Control值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
