Nginx配置静态资源缓存，提升网站速度

前言

每次访问网站都要重新下载图片、CSS、JS？太浪费了！配置Nginx静态资源缓存，让浏览器本地缓存这些文件，下次访问直接从本地读，速度快好几倍。

一、什么是浏览器缓存

浏览器访问网站后，把图片、CSS、JS等静态文件存在本地。下次再访问，直接从本地读，不用再从服务器下载。

好处：

• 加载更快
• 省带宽
• 减轻服务器压力

二、配置静态资源缓存

打开Nginx配置文件，在server段加：

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

参数解释

参数	含义
expires 30d	缓存30天
expires 1h	缓存1小时
expires 1M	缓存1个月
Cache-Control public	允许所有缓存

不同文件缓存时间

# 图片缓存30天
location ~* \.(png|jpg|jpeg|gif|ico|svg)$ {
    expires 30d;
}

# CSS/JS缓存7天
location ~* \.(css|js)$ {
    expires 7d;
}

# HTML不缓存（保证更新及时）
location ~* \.html$ {
    expires -1;
}

三、验证配置

nginx -t

重载Nginx：

nginx -s reload

四、验证是否生效

方法1：curl测试

curl -I https://www.0454.wang/static/logo.png

看到响应头有：

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

就是生效了。

方法2：浏览器F12

按F12 → Network → 点图片请求 → 看Response Headers：

Cache-Control: max-age=2592000

五、缓存更新策略

问题： 缓存了30天，但我更新了图片怎么办？

方法1：文件名加版本号

<img src="/logo.png?v=20240101">

浏览器看到文件名变了，就会重新下载。

方法2：文件名加hash

<img src="/logo.abc123.png">

构建工具自动加hash，内容变了hash就变。

六、常见坑

坑1：HTML也被缓存了

问题： 更新了网站内容，但用户看到的还是旧的。

解决： HTML不缓存

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

坑2：缓存时间太长

问题： 图片更新了，用户30天都看不到新的。

解决： 用版本号或hash。

坑3：CDN缓存了旧文件

问题： Nginx配置了，但CDN没刷新。

解决： 去CDN后台刷新缓存。

坑4：没加expires就没缓存

问题： 配置了但不生效。

检查： 看location有没有匹配到。

七、完整配置示例

server {
    listen 80;
    server_name www.0454.wang;
    root /var/www/html;

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

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

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

八、缓存时间怎么设

文件类型	推荐缓存时间
图片（png/jpg）	30天
CSS/JS	7天
HTML	不缓存
字体文件	30天

九、怎么清除缓存

浏览器端

• 强制刷新：Ctrl + F5
• 清除浏览器缓存

服务器端

• 更新文件名版本号
• 重载Nginx

总结

记住：

1. 静态资源加缓存，提升速度
2. 图片缓存30天
3. CSS/JS缓存7天
4. HTML不缓存
5. 更新了就改文件名版本号
6. 用curl验证是否生效

最常用配置：

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

遇到问题加QQ23979811 协助处理