html中meta标签设置cache-control对chrome、firefox、safari等现代浏览器完全无效，缓存行为仅由服务端http响应头（如cache-control、expires）决定，且必须通过nginx精确配置location = /index.html并验证响应头生效。
HTML 缓存不是在 HTML 里写的
直接在 <meta http-equiv="Cache-Control"> 里设缓存策略基本无效——Chrome、Firefox、Safari 全部忽略它。浏览器只认服务器返回的 HTTP 响应头，比如 Cache-Control、Expires、ETag。你在本地用 file:// 协议打开 HTML 测试，连 HTTP 头都没有，更别提缓存生效了。
Nginx 中给 index.html 设短缓存（推荐做法）
单页应用（SPA）的 index.html 必须避免强缓存，否则 JS/CSS 文件名哈希变了，但用户还拿着旧 HTML，页面就白屏或错乱。
- 用
max-age=0+must-revalidate：每次访问都发条件请求，服务端根据ETag或Last-Modified决定是否返回304 Not Modified - 不要用
no-store：它禁掉所有缓存（包括内存缓存），首屏性能明显变差 - 配置示例（Nginx）：
location = /index.html {
add_header Cache-Control "public, max-age=0, must-revalidate";
}
注意：这个规则必须精确匹配 /index.html，不能写成 location ~ \.html$，否则会把带哈希的 main.a1b2c3.js 也套进去。
静态资源（JS/CSS/图片）用指纹文件名 + 长缓存
真正该长期缓存的是构建后带哈希的静态资源，比如 app.f3a8e2.js。这类文件内容不变就不会改名，所以可以放心设 max-age=31536000（1 年）。
- Webpack/Vite/Rollup 默认开启文件名哈希，确保内容变则文件名变
- Nginx 配置示例：
location ~* \.(js|css|png|jpg|gif|svg|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
immutable 是关键：告诉浏览器“这文件这辈子都不会变”，不用再发条件请求验证，省一次往返。
验证缓存是否按预期工作
别靠 F5 刷新判断——它可能走内存缓存或强制校验。正确方式是：
- 打开 Chrome DevTools → Network 标签 → 刷新页面
- 找到
index.html请求 → 看 Response Headers 里有没有Cache-Control - 看 Status 列：
304 Not Modified表示协商缓存生效；200 from disk cache对 HTML 来说是危险信号（说明强缓存被误启） - 强制跳过缓存测试：用
curl -I https://yoursite.com/index.html直接看响应头
最容易被忽略的一点：CDN 或反向代理（如 Cloudflare、Nginx proxy_cache）可能覆盖你写的 Cache-Control。务必检查最终到达浏览器的响应头，而不是只信自己配的那一层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
