前言

网站访问慢？很大一部分原因是静态资源（图片、CSS、JS）每次都要重新从服务器下载。配置浏览器缓存之后，用户第二次访问就直接从本地缓存读了，速度快很多。本文讲一下 Nginx 怎么配置静态资源缓存。

缓存原理

浏览器第一次访问网站，服务器返回静态资源的时候，加上 Cache-Control 头，告诉浏览器"这个文件你缓存多久"。

第二次访问的时候，浏览器发现本地有缓存，且还没过期，就直接用本地的，不用再请求服务器了。

配置方法

按文件类型设置缓存时间

在 Nginx 配置里加：

server {
    listen       443 ssl http2;
    server_name  www.example.com;

    root  /var/www/html;
    index index.html;

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|swf|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # HTML 文件不缓存
    location ~* \.html$ {
        expires -1;
    }
}

缓存时间说明

更精细的配置

# 图片缓存 30 天
location ~* \.(jpg|jpeg|png|gif|ico)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# CSS JS 缓存 7 天
location ~* \.(css|js)$ {
    expires 7d;
    add_header Cache-Control "public";
}

# 字体文件缓存 30 天
location ~* \.(woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

# HTML 不缓存
location ~* \.html$ {
    expires -1;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

参数说明

怎么验证缓存生效了

打开浏览器 F12 → Network → 点一个静态资源 → 看 Response Headers：

Cache-Control: max-age=2592000
Expires: xxx

有这两个头就说明缓存生效了。

常见坑

坑1：改了 CSS 但页面没更新

更新了 CSS 文件，但用户看到的还是老版本。

原因： 浏览器缓存了老 CSS。

解决：

• 改文件名：style.css → style.v2.css
• 或者加版本号：style.css?v=20261007

这样浏览器就会当成新文件重新下载。

坑2：HTML 也被缓存了

页面内容更新了，但用户看到的还是老页面。

原因： HTML 文件也被缓存了。

解决： HTML 文件设置不缓存：

location ~* \.html$ {
    expires -1;
}

坑3：缓存时间太长

设置了一年缓存，万一文件要改怎么办？

解决： 用文件指纹（版本号）的方式，比如：

• app.3a7b2c.js
• style.8d9e1f.css

文件内容变了，文件名就变了，缓存自然就失效了。

坑4：配置了缓存但不生效

加了 expires 但浏览器还是每次都请求。

原因1： 开发模式下浏览器禁用了缓存。

解决： F12 → Network → 把 "Disable cache" 的勾去掉。

原因2： Nginx 没重载。

解决：

nginx -t
nginx -s reload

总结

提醒： 缓存配置好之后，网站打开速度能快好几倍，特别是图片多的网站。

遇到问题加QQ23979811 协助处理