关键看size列：显示“from memory cache”或“from disk cache”即命中缓存；若size为具体字节数且状态码200，说明重新下载；304则表示协商缓存生效。
怎么看 DevTools 里 index.html 真的被缓存了
别信 Network 面板上 Status 显示 200 就以为没缓存——它可能来自内存或磁盘。关键看 Size 列：from memory cache 或 from disk cache 才是命中缓存；2.4 KB（带具体字节数）且状态码是 200，说明重新下载；304 Not Modified 表示发了条件请求、服务端确认未变、复用本地副本。
注意：强制刷新（Ctrl+Shift+R）会跳过所有缓存逻辑，必须用普通刷新（F5 或地址栏回车）才能观察真实缓存行为。
验证时还要检查 Response Headers：Cache-Control、ETag、Expires 是否按预期下发。比如你配了 no-cache, must-revalidate，但实际返回的是 public, max-age=3600，那环境配置就根本没生效。
不同环境要配不同的 Cache-Control 值
开发环境建议直接禁用强缓存，避免反复清理浏览器缓存：Cache-Control: no-store 最干脆；或者用 no-cache, must-revalidate, max-age=0 强制每次校验。
测试/预发环境可模拟线上策略，但需确保 /version.json 这类版本探测接口始终走 no-cache, must-revalidate，且前端 fetch 时显式设 cache: 'no-store'，否则 CDN 可能缓存旧版本号。
生产环境对 index.html 必须避免 public, max-age=3600 这类长缓存——它会让用户卡在旧 HTML，哪怕 JS/CSS 已更新。推荐：private, max-age=0, must-revalidate（允许登录态用户缓存，但每次都要验证），或更保守的 no-cache。
- 静态站点（文档页、博客）例外：可用
public, max-age=3600，但前提是所有 JS/CSS 路径含 content hash，且构建产物与 HTML 版本严格对齐 - 敏感页（支付、登录）必须用
no-store，连协商缓存都不许发生
为什么本地 Nginx 和 CDN 缓存表现不一致
CDN（如 Cloudflare、阿里云全站加速）默认会把 query string 当作缓存键的一部分，但部分企业级 CDN 或反向代理（如某些 Nginx proxy_cache_key 配置）会忽略 ?v=1.2.3 —— 导致你加了参数却仍返回旧 HTML。
常见错误配置：
- Nginx 中
location ~* \.html$块漏了add_header，或被更高优先级的location /覆盖 - CDN 控制台开了「忽略 URL 参数」，导致
index.html?v=abc和index.html被视为同一资源 - Service Worker 的
fetch事件里没排除document请求，或没给 HTML 配 network-first 策略，结果 SW 把旧 HTML 拦下来直接返回
验证方式：curl -I https://your-domain.com/index.html，对比响应头是否和 DevTools 里看到的一致。如果不一致，问题一定出在 CDN 或中间代理层，而非源站 Nginx。
SPA 中 index.html 缓存错配的真实后果
最典型的故障现象：用户刷新后按钮文案没变、新路由 404、控制台报 Cannot find module './new-feature.js' —— 不是因为 JS 没部署，而是 HTML 仍引用着旧 hash 名的 JS 文件，而那个文件已在 CDN 清理或过期。
根本原因只有一个：index.html 的缓存时间比它所引用的 JS/CSS 长。
- JS/CSS 用
public, max-age=31536000, immutable是安全的，前提是文件名含 hash -
index.html就不能用max-age=31536000，哪怕你用了 hash 文件名——因为 HTML 本身不含 hash，它的路径固定为/index.html - 真正可靠的解法是文件名哈希化：
index.a1b2c3.html+ Nginx 重定向，或构建时生成唯一入口名并由部署流程自动注入 CDN 配置
这个点容易被忽略：缓存策略不是写在代码里就生效，它依赖整个交付链路——构建、部署、CDN、反向代理、浏览器——每个环节都得对齐，差一个就断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
