启用缓存指纹后，应配置cache-control为"public, max-age=31536000, immutable"以实现强缓存，确保构建产物含contenthash、html路径同步更新，并通过curl验证响应头，避免proxy_pass覆盖或开发工具禁用缓存导致失效。
对 CSS/JS 启用缓存指纹（如 app.a1b2c3.js、style.f456.css）后，文件内容变更即触发文件名变化，因此可安全启用强缓存。关键不是“设长一点”，而是让浏览器彻底信任该资源长期有效，避免重复验证。
使用 immutable + 一年 max-age
这是现代浏览器支持的最佳组合，明确告诉浏览器：该资源不会变，无需发条件请求（如 If-None-Match 或 If-Modified-Since）。
- 在匹配 CSS/JS 的 location 块中添加：
add_header Cache-Control "public, max-age=31536000, immutable"; - 不要混用
expires 1y和add_header Cache-Control，后者优先级更高，易覆盖前者 - 确保文件名中确实包含哈希（如 Webpack/Vite 输出的带 contenthash 的产物），否则缓存更新会失效
按扩展名精准匹配 location
避免全局配置误伤其他资源，只对已指纹化的静态资源生效：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 推荐写法：
location ~* \.(js|css)$ {<br> add_header Cache-Control "public, max-age=31536000, immutable";<br>} - 若同时服务未指纹化资源（如第三方库），建议单独分组，用不同策略（例如
max-age=604800） - 注意正则顺序：更具体的 location（如
= /main.js）会优先生效，需合理安排位置
配合构建工具与部署流程
缓存策略有效依赖前端工程链路配合：
- 确保构建输出自动注入哈希（Webpack 的
[contenthash]，Vite 的默认行为） - HTML 中引用的 CSS/JS 路径必须同步更新（如通过 HtmlWebpackPlugin 或构建时注入）
- CDN 或反向代理层（如 Nginx 自身 proxy_cache）不应覆盖或忽略这些响应头
- 上线后可用
curl -I https://yoursite.com/app.abc123.js验证响应头是否含Cache-Control: public, max-age=31536000, immutable
避免常见陷阱
看似简单，但几个细节常导致缓存不生效或更新失败：
- 开发环境开启
Disable cache（Chrome DevTools Network 标签页）会导致测试失真，务必关闭后再验证 - 如果用了
proxy_pass回源，后端响应头可能被 Nginx 覆盖，需确认是否启用了proxy_ignore_headers Cache-Control Expires;等干扰指令 - HTTP/2 推送或 Service Worker 若自行管理资源，可能绕过 HTTP 缓存逻辑，需统一协调
- 旧版浏览器（如 IE11、Android Browser）不支持
immutable，但会降级为正常max-age，不影响功能，仅少一次优化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
