图片长期有效缓存的关键是URL唯一绑定内容，需用Cache-Control: public, immutable, max-age=31536000配合内容哈希命名（如logo.a1b2c3.png），禁用协商缓存并避免Expires。
让图片长期有效缓存，关键不是“不让它过期”，而是让浏览器确信：只要URL没变，文件就绝对没变——这样它才敢放心存一年、两年，不用反复验证。
用 Cache-Control: immutable + max-age 实现真正长期缓存
这是现代浏览器支持的最稳妥组合。它告诉浏览器：“这张图不会改，就算过了 max-age 时间，也不用发请求验证。”
- max-age=31536000 表示缓存一年（365天 × 24小时 × 60分钟 × 60秒）
- immutable 是关键指令，禁用协商缓存（ETag/Last-Modified 验证），彻底避免“304 Not Modified”往返开销
- 必须配合内容哈希命名使用（如 logo.a1b2c3.png），否则 immutable 会带来更新风险
服务端配置示例（Nginx / Apache）
静态图片路径需单独匹配，避免被 HTML 或 JS 的缓存策略覆盖。
-
Nginx 配置：
location ~* \.(jpg|jpeg|png|gif|webp|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable, max-age=31536000";
} -
Apache 配置（.htaccess）：
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
</IfModule>
# 需额外通过 Header 指令补充 immutable（需 mod_headers）
必须搭配资源指纹命名
缓存再久也没用，如果文件名不变，更新后浏览器仍会沿用旧缓存。真正长期有效的前提是 URL 唯一绑定内容。
立即学习“前端免费学习笔记（深入）”；
- 构建时生成带哈希的文件名：icon-header.f3a8d2.png、banner-7e1b94.jpg
- HTML 中引用该带哈希的路径，而非原始名
- 发布新版本时，新哈希对应新文件，旧文件可保留一段时间供缓存过渡
避免误用 Expires 替代 Cache-Control
Expires 依赖客户端本地时间，存在时钟偏差风险；而 max-age 是相对时间，更可靠。两者同时存在时，Cache-Control 优先级更高，但建议只用 Cache-Control 管理图片缓存。
- 不要写：
Expires: Wed, 31 Dec 2030 23:59:59 GMT（易因用户设备时间不准失效） - 推荐写：
Cache-Control: public, immutable, max-age=31536000 - 对 CDN 或代理节点也生效，且语义清晰、兼容性好（Chrome 49+、Firefox 49+、Safari 11.1+ 支持 immutable）
