静态资源缓存提升性能的关键在于：一、用contenthash生成带哈希文件名并配长缓存；二、HTML设短缓存或协商缓存；三、CDN与Nginx响应头协同对齐。
能显著提升，但关键不在 HTML 本身，而在于把 CSS、JS、字体、图片这些静态资源“真正缓存住”，同时让 HTML 只做轻量级索引。
静态资源必须用内容哈希命名
文件名不变，内容变了，浏览器就认不出是新版本——这是缓存失效最常见的根源。构建时生成带哈希的文件名，比如 main.a1b2c3d4.js、style.e5f6g7h8.css，这样每次内容更新，URL 自动变化，浏览器自然弃旧取新，无需清缓存或设短有效期。
- Webpack 用户：用
contenthash替代hash或chunkhash - Vite 默认启用内容哈希，无需额外配置
- 确保 HTML 中引用的路径也同步更新（html-webpack-plugin 或 Vite 的 HTML 插件会自动处理）
给静态资源配强缓存 + immutable
一旦用了哈希文件名，就可以放心设极长缓存时间，并告诉浏览器“这个 URL 永远不会变内容”。这样它连验证请求（If-None-Match）都省了，首屏加载更快、服务器压力更小。
- Nginx 配置示例：
location ~* \.(css|js|woff2|png|jpg|gif)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>} - CDN 上也要同步设置对应路径的缓存策略，避免 CDN 忽略源站头、自作主张缓存
- 别混用
public和private：CDN 不认private，会导致资源无法被边缘节点缓存
HTML 本身要短缓存或协商缓存
HTML 是页面入口，哪怕只改一个按钮文案，用户就不该看到旧版。所以不能给它设 long max-age，而是让它轻量、可控地更新。
立即学习“前端免费学习笔记（深入）”；
- 纯静态页（如文档首页）：可设
Cache-Control: public, max-age=300（5 分钟），平衡 CDN 回源压力与更新及时性 - 含少量动态内容（如评论区用 htmx 加载）：用
no-cache，允许缓存但强制每次验证，靠 ETag 或 Last-Modified 返回 304 - 敏感页（登录、支付）：必须用
no-store，彻底禁用任何环节缓存 - 别依赖 <meta http-equiv="Cache-Control">：现代浏览器基本无视它，只认 HTTP 响应头
压缩 + 协同配置才能让缓存真正生效
光设响应头不够，如果传输体积大、链路不一致，缓存优势就打折扣。
- 开启 Brotli 或 Gzip 压缩：Nginx 开启
brotli on;或gzip on;，HTML/CSS/JS 体积通常缩小 50%~70% - CDN 缓存规则必须和服务端响应头对齐：在控制台显式设置“遵循源站响应头”，或手动为
/index.html设no-cache、为/static/**设public, immutable - 检查 Network 面板：确认
index.html的Cache-Control和x-cache（如 Cloudflare）头是否按预期生效
