必须用内容哈希文件名配合Cache-Control: public, max-age=31536000, immutable，否则URL不变时浏览器永不发起新请求；HTML须禁用immutable并设no-cache或max-age=0，动态HTML禁用public缓存以防信息泄露。
静态资源必须带哈希文件名 + immutable 指令
不改文件名就直接加 Cache-Control: public, max-age=31536000, immutable，等于告诉浏览器“这文件永不过期”，但实际更新后用户根本拿不到新版本。真正有效的长期缓存，前提是文件内容变 → 文件名变 → URL 变。构建工具（如 Webpack、Vite）生成的 main.a1b2c3.js 或 style.f4e5d6.css 就是为此服务的。
常见错误：只在 HTML 里引用 main.js，然后靠后端给它配 max-age=1y —— 这样一旦发布新版，所有已缓存的用户都会继续跑旧 JS，直到强制刷新或缓存自然过期（而 immutable 会让浏览器彻底跳过验证）。
- JS/CSS/图片等纯前端产出资源，走哈希文件名 +
Cache-Control: public, max-age=31536000, immutable - HTML 文件本身绝不能用
immutable，也不能设长缓存，必须配Cache-Control: no-cache, must-revalidate或max-age=0 - CDN 缓存策略必须和源站响应头一致；否则 CDN 返回了缓存的 HTML，里面还引着旧哈希名，就全乱套了
动态资源指内容随请求上下文变化的 HTML
所谓“动态 HTML”，不是指用了 Vue 或 React，而是指每次请求返回的 HTML 字节流可能不同：含用户登录态、地域推荐、实时库存、A/B 实验分组等。这类 HTML 无法被安全缓存，哪怕只缓存 1 秒，都可能导致用户看到别人的数据或过期状态。
典型反例：/user/profile 接口返回的 HTML 插入了 Cookie 中的用户名，却配了 Cache-Control: public, max-age=60 —— 这个响应可能被 CDN 缓存并返回给下一个无登录态的访客，造成信息泄露。
- 含
Set-Cookie、Authorization、Cookie依赖的 HTML，一律禁用共享缓存（即不用public） - 必须用
private+ 短max-age，或直接no-store（尤其涉及支付、账户页） - 如果真要缓存部分动态页，得靠 ESI（Edge Side Includes）或后端渲染时做 fragment cache，而不是整页缓存
meta 标签对 HTTP 缓存完全无效
写 看起来很直观，但浏览器根本不认。HTTP 缓存策略只看响应头，meta 标签只影响页面内跳转或历史导航行为（如 history.pushState 后的 back/forward），对资源是否从网络加载毫无作用。
很多团队在测试环境加了这个 meta 就以为“关掉了缓存”，结果上线后发现用户始终拿不到新 CSS —— 因为真实响应头仍是 Cache-Control: public, max-age=31536000，浏览器照缓不误。
- 调试时务必用 DevTools 的 Network 面板看真实响应头，别信
meta - 服务端配置优先级永远高于任何前端标签；Nginx、CDN、后端框架（如 Express、Spring Boot）才是控制源头
- 若用 Service Worker，它能劫持请求并伪造响应头，但这是另一层逻辑，不改变原始 HTTP 缓存规则
CDN 缓存键必须包含关键请求特征
默认情况下，CDN 缓存键只是 URL 路径（如 /article/123）。但如果该路径背后的内容取决于 Cookie、User-Agent 或查询参数（如 ?utm_source=wechat），就必须显式把它们加入缓存键，否则不同用户会互相污染。
比如某商品页 URL 是 /item/456，但价格展示逻辑根据 Cookie: region=cn 切换，CDN 若只按路径缓存，就会把中国价缓存后返回给日本用户。
- Nginx 可用
proxy_cache_key自定义，例如$scheme$host$request_uri$cookie_region - Cloudflare、阿里云 CDN 等控制台支持勾选 “缓存忽略 Cookie” 或 “缓存包含特定 Cookie”
- 切记：加了变量就等于降低缓存命中率；平衡点在于——哪些变量真会导致内容差异，哪些只是埋点参数（如
utm_*）应剔除
缓存机制的复杂点不在指令本身，而在“谁在什么环节决定了这个资源到底算静态还是动态”。一个请求进来，Nginx、CDN、浏览器、Service Worker、甚至后端模板引擎，都可能参与决策；漏掉其中一环，就可能让本该及时更新的 HTML 卡在某个中间层不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
