index.html不能靠模板缓存提速，真正起效的是服务端通过cache-control等响应头精准控制其http缓存；配错策略会导致html与js/css版本不一致，引发白屏、404等问题。
index.html 本身不能靠“模板缓存”提速——浏览器真正能缓存的，是它作为 HTTP 资源被响应时的字节流。所谓“HTML 缓存机制”，本质就是服务端对 index.html 响应头的精准控制。缓存策略错一步，用户就可能卡在旧 HTML 里，哪怕 JS 已更新、按钮文案已删、路由结构已改。
为什么给 index.html 配 Cache-Control: public, max-age=3600 是高危操作
这个配置会让浏览器和所有中间代理（比如 CDN）把 index.html 缓存一小时。问题在于：HTML 文件通常不带内容哈希，而它引用的 main.js、app.css 却可能已更新。结果就是用户加载了新 HTML（没发生），却执行着旧 JS（发生了），页面白屏、路由 404、按钮点击无反应——全因 HTML 和资源版本不一致。
- 静态站点（如文档页、博客）可设
public, max-age=3600，但前提是所有 JS/CSS 路径含 content hash（如main.8f3a2d.js） - 带登录态或实时数据的页面（仪表盘、订单列表），必须用
private, max-age=0, must-revalidate：允许浏览器缓存，但每次访问都向服务器验证是否变更 - 支付确认页、密码重置页等敏感页，直接上
no-store：禁止任何缓存，连内存都不许留副本
meta http-equiv="Cache-Control" 在现代浏览器中基本无效
你在 里写 <meta http-equiv="Cache-Control" content="no-cache">，Chrome、Firefox、Edge 都会无视它。只有极老版 Safari 可能降级识别。HTTP 缓存策略必须由服务端通过响应头设置，前端无法用 HTML 标签覆盖。
- Nginx 示例（针对
/index.html）：location = /index.html {<br> add_header Cache-Control "private, max-age=0, must-revalidate";<br>} - Apache 示例（
.htaccess）：<files><br> Header set Cache-Control "private, max-age=0, must-revalidate"<br></files>
- 若用 Vite / Webpack Dev Server，需额外配
headers插件或代理层注入，开发服务器默认不设缓存头
缓存生效的前提：JS/CSS 必须带内容哈希 + 服务端压缩
光给 index.html 设 no-cache 不够，还得确保它引用的资源真能长期缓存。否则 HTML 每次都重新拉，JS 却因没哈希而反复被当作新文件下载，缓存形同虚设。
- Webpack 需启用
contenthash：filename: "[name].[contenthash:8].js" - Vite 默认输出带 hash 的文件名，无需额外配置
- Nginx 必须开启
gzip on或brotli on，否则 HTML 体积大，缓存收益被传输耗时抵消 - CDN 或反向代理不能把
index.html和main.xxxx.js混用同一缓存规则——前者短时效，后者长时效
最常被忽略的点：HTML 缓存时间越长，对 JS/CSS 路径哈希的依赖就越强；一旦构建产物没哈希、或服务端没压缩、或 CDN 规则写错，缓存不仅不加速，反而制造一致性故障。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
