Nginx静态缓存配置

Nginx静态缓存配置

引言

CSS、JS、图片、字体这类不变的静态资源，每次都回源取一遍浪费带宽和时间。用Nginx给静态资源加浏览器缓存响应头，让浏览器本地留存，第二次访问直接读本地，首屏和重复访问速度明显提升。

配置示例

在server或location块中：

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

参数说明

• expires 30d：设置缓存30天，浏览器本地留存；
• Cache-Control public：允许中间缓存（CDN、代理）；
• immutable：文件内容不变，缓存期内不再发条件请求；
• access_log off：静态资源不记访问日志，减少IO。

带版本号更新

静态文件内容更新后，旧缓存会导致用户看到老文件。常用办法是文件名带哈希或版本，如app.[hash].js，内容一变文件名就变，浏览器当成新文件重新下载：

# 配合构建工具输出的带hash文件名，缓存可拉长到一年
expires 1y;

动态文件不要长缓存

HTML页面、接口响应要短缓存或不缓存，避免用户看到过期页面：

location / {
    add_header Cache-Control "no-cache";
}

验证方法

浏览器F12网络面板看响应头：Cache-Control、Expires，再看状态码，二次访问200 from disk/memory cache即生效。

注意事项

• 缓存过期时间按资源稳定性设置，图片长、HTML短；
• 更新静态资源靠改文件名版本号，而不是缩短缓存；
• 不要给动态接口、登录页面加public长缓存；
• 改配置后nginx -t检查再reload。

总结

Nginx静态缓存用expires加Cache-Control给css/js/图片设置本地缓存，稳定资源配合版本号长缓存，动态页面不缓存。浏览器F12验证响应头，平衡访问速度与内容新鲜度。