nginx中通过location块配合expires指令和add_header设置缓存:按后缀匹配静态资源设长期缓存(如1y),html设短时效或禁用强缓存,必须补全cache-control头并验证响应头生效。

直接在 location 块里用 expires 指令就能配置浏览器本地缓存过期时间,核心是按资源类型匹配路径、设合理时长、配合 Cache-Control 头生效。
按文件后缀精准设置静态资源缓存
最常用也最稳妥的方式:针对 JS、CSS、图片等不常变的资源,在正则匹配的 location 中统一设长期缓存。
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ { expires 1y; }- 这会自动添加
Expires和Cache-Control: max-age=31536000响应头 - 支持单位:
s(秒)、m(分)、h(小时)、d(天)、M(月≈30天)、y(年≈365天)
对 HTML 等动态入口页禁用强缓存
HTML 文件通常内容频繁更新但文件名不变,不宜长期缓存,建议设为立即过期或极短时效。
location = /index.html { expires -1; add_header Cache-Control "no-cache, must-revalidate"; }-
expires -1等效于Cache-Control: no-cache,仍允许协商缓存(如 304) - 若需兼顾首屏速度,可设
expires 10m;,但要确保发布流程能触发浏览器刷新
用 add_header 补全 Cache-Control 语义
expires 只控制 Expires 头,现代浏览器更依赖 Cache-Control,必须显式补充。
- 长期缓存推荐加
immutable:防止用户按 F5 强制重验add_header Cache-Control "public, immutable, max-age=31536000"; - 禁止缓存管理页:
expires epoch; add_header Cache-Control "no-store, no-cache, must-revalidate"; - 注意:
add_header在同一作用域重复写会覆盖,多值务必合并成一条
验证配置是否真正生效
改完别跳过验证——很多问题出在规则没命中或响应头被覆盖。
- 先运行
nginx -t检查语法,再nginx -s reload生效 - 用
curl -I https://yourdomain.com/test.js查看返回头,确认同时有Expires和Cache-Control - Chrome DevTools → Network → 刷新后看 Size 列:
from memory cache或from disk cache表示命中 - 测试时关闭开发者工具里的 “Disable cache”,否则会绕过缓存逻辑











