Nginx配置静态资源expires缓存规则提速

前言

图片、CSS、JS、字体等静态资源每次都向服务器重新请求，浪费带宽也拖慢页面。Nginx 的 expires 指令通过设置 Cache-Control 过期时间，让浏览器本地缓存静态资源，重复访问不再回源，配合版本号可解决更新不刷新问题。本文给出按类型设置缓存、html 不缓存、版本号破缓存、重载验证的完整配置。

操作步骤

1. 在 server 或 http 块添加缓存规则

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

2. HTML 不缓存，保证及时更新

location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache";
}

3. 图片单独设更长缓存

location ~* \.(png|jpg|jpeg|gif|webp|svg)$ {
    expires 90d;
    add_header Cache-Control "public";
}

4. 带版本号的资源长期缓存

location ~* \.(css|js)\?v=[0-9.]+$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

5. 校验并重载

nginx -t
nginx -s reload

6. 浏览器验证响应头

curl -I https://域名/style.css

响应头出现 Cache-Control 和 Expires 即生效。

常见坑

1. 把 HTML 也长期缓存，内容更新后访客看到旧页面。
2. 缓存时间过长，静态文件更新后浏览器仍用旧版，需加版本号 hash。
3. 正则写错导致动态接口被当成静态缓存。
4. CDN 已缓存源站，Nginx expires 只影响浏览器，源站更新需刷新 CDN。
5. immutable 只对带版本号资源使用，避免误伤。
6. add_header 在 location 内会覆盖上层的其他 add_header，注意合并。
7. 移动端强缓存配合 Service Worker 时要统一策略。

总结

expires 按资源类型分层缓存：图片字体长缓存、CSS/JS 中长缓存、HTML 不缓存。更新靠文件名版本号或 hash 破缓存，而不是缩短缓存时间。配置后用 curl 看响应头确认，再结合 CDN 刷新策略形成完整缓存链。

遇到问题加QQ23979811 协助处理