用location块配合expires指令可精准控制静态资源缓存:按文件类型匹配并设置合理过期时间,JS/CSS设1h、图片设30d、字体/SVG设1y且加immutable,HTML禁用expires并设no-cache,配置后需语法检查与重载验证。

用 location 块配合 expires 指令,是最直接、最常用控制浏览器缓存静态资源的方式。核心是按文件类型精准匹配,再设置合理过期时间与缓存策略,避免全局误配或缓存失效问题。
按后缀精准匹配静态资源
在 server 块内添加带正则的 location,只对目标文件生效:
location ~* \.(js|css)$ { expires 1h; add_header Cache-Control "public"; }location ~* \.(jpg|jpeg|png|gif)$ { expires 30d; add_header Cache-Control "public, immutable"; }location ~* \.(woff2|woff|ttf|eot|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; }
注意大小写不敏感要加 ~*;immutable 表示资源内容不会变,浏览器可跳过条件请求(如 If-None-Match),提升加载速度。
不同资源设不同缓存周期
缓存时间不是越长越好,需结合更新频率权衡:
- JS/CSS 文件常随版本发布更新,设
1h或1d更安全,配合文件名哈希(如app.a1b2c3.js)可放心设1y - PNG/JPEG 图标若用于 UI 且变动少,可设
6m;若为用户上传头像等动态图,应禁用缓存或设极短时间 - 字体和 SVG 图标极少变更,设
1y合理,immutable能减少重验证开销
避免对 HTML 入口文件启用 expires
不要给 /index.html 或根路径加 expires:
- iOS Safari 可能将其缓存为 PWA 启动页或导航标题,更新后不刷新
- 建议对 HTML 返回
Cache-Control: no-cache, must-revalidate或max-age=0 - 可通过
location = / { ... }单独控制,确保每次访问都校验最新版本
验证与生效要点
配置完必须检查语法并重载,否则不生效:
- 运行
sudo nginx -t确认配置无误 - 执行
sudo systemctl reload nginx(非 restart,避免中断服务) - 用浏览器开发者工具 → Network 标签页,查看响应头中
Expires和Cache-Control是否符合预期 - 注意:若上游服务已返回
Cache-Control: no-store,Nginx 的expires不会覆盖它,需统一后端策略


















