为CSS与JS文件配置长效缓存需启用内容哈希并精准匹配扩展名，设置Cache-Control: public, max-age=31536000, immutable；HTML必须禁用长缓存，CDN与构建流程需同步配合，并通过curl和DevTools验证响应头。
为 CSS 与 JS 文件配置长效缓存，核心是“让浏览器彻底信任该资源长期不变”，而不是单纯设个长过期时间。前提是这些文件已启用内容哈希（如 app.a1b2c3.js），否则缓存再久也会导致更新失效。
只对带哈希的静态资源启用强缓存
在 Nginx 的 location 块中精准匹配扩展名，并设置现代缓存头：
- 用正则只匹配已指纹化的资源：
location ~* \.(js|css)$ - 添加响应头：
add_header Cache-Control "public, max-age=31536000, immutable"; - 不要混用
expires 1y，它生成的Cache-Control可能被后续add_header覆盖 - 避免全局配置，防止误伤 HTML、API 或未哈希的第三方脚本
构建流程必须同步配合
缓存策略生效的前提是前端工程链路完整：
- Webpack/Vite 等工具需启用
contenthash，确保文件内容变则文件名变 - HTML 中引用的路径必须由构建自动更新（例如通过
HtmlWebpackPlugin注入） - 若使用 CDN 或反向代理，确认其未覆盖或忽略你设置的响应头
HTML 必须禁用长缓存
CSS/JS 可以缓一年，但 HTML 是入口，必须实时更新：
- 单独配置 HTML 路径：
location ~* \.html$ { add_header Cache-Control "no-cache, must-revalidate"; } - CDN 层也要将
*.html设为不缓存或仅缓存 1 分钟 - 否则用户可能加载旧 HTML，仍引用老版本的 JS/CSS，造成页面错乱
上线后务必验证响应头
配置完不能只看代码，要确认浏览器实际收到什么：
- 用
curl -I https://yoursite.com/app.x1y2z3.js检查是否返回Cache-Control: public, max-age=31536000, immutable - 打开 Chrome DevTools → Network → 刷新页面 → 查看 JS/CSS 请求的状态码和响应头
- 二次访问时应显示
200 (from disk cache)，而非304或重新下载 - 注意关闭 DevTools 中的 “Disable cache” 选项，否则测试无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
