前言

每次访问网站都要重新下载图片、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";
}

参数解释

不同文件缓存时间

# 图片缓存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";
    }
}

八、缓存时间怎么设

九、怎么清除缓存

浏览器端

• 强制刷新：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 协助处理

前言

网站打开慢？带宽不够？开启Nginx的Gzip压缩，能把文件体积压缩70%以上，加载速度立马提升好几倍。本文讲怎么配置。

一、什么是Gzip

Gzip是一种压缩算法，Nginx在发给浏览器之前先把文件压缩，浏览器收到后自动解压。

效果：

• HTML/CSS/JS文件压缩70%左右
• 减少带宽
• 加载更快

二、配置Gzip

打开Nginx配置文件：

vi /etc/nginx/nginx.conf

在http段里加：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
gzip_vary on;
gzip_buffers 16 8k;
gzip_http_version 1.1;

参数解释

压缩级别说明

推荐用6，不要用9，太吃CPU。

三、验证配置

nginx -t

重载Nginx：

nginx -s reload

四、验证是否生效

方法1：curl测试

curl -I -H "Accept-Encoding: gzip" https://www.0454.wang/

看到响应头有：

Content-Encoding: gzip

就是生效了。

方法2：浏览器F12

按F12打开开发者工具 → Network → 点请求 → 看Response Headers：

Content-Encoding: gzip

五、哪些文件该压缩

该压缩的

• HTML文件
• CSS文件
• JS文件
• JSON数据
• SVG图片

不该压缩的

• 图片（jpg/png）：本身已经压缩过了
• 视频：太大，压缩没意义
• 压缩包（zip/rar）：已经压缩过了

六、常见坑

坑1：只在http段配了，但server段覆盖了

检查： 看server段有没有gzip off。

坑2：gzip_types没写全

问题： JS文件没压缩。

解决： 加上application/javascript。

坑3：压缩级别太高

问题： 用了9，CPU飙升。

解决： 改成6。

坑4：CDN缓存了旧文件

问题： 配置了gzip但CDN没生效。

解决： 刷新CDN缓存。

七、完整配置示例

http {
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
    gzip_vary on;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;

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

八、对比效果

没开Gzip

HTML文件：100KB

开了Gzip

HTML文件：25KB

省了75%！

总结

记住：

1. 开启gzip on
2. 压缩级别用6
3. gzip_types要写全
4. 图片不要压缩
5. 用curl验证是否生效

最常用配置：

gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_vary on;

遇到问题加QQ23979811 协助处理