静态资源压缩

使用Gzip压缩可以显著减少传输数据量，提高网站加载速度。

Gzip基本配置

启用Gzip

gzip on;

压缩级别

gzip_comp_level 6;

说明：

• 范围：1-9
• 数字越大压缩率越高，但CPU消耗越大
• 推荐值：4-6

压缩类型

基本配置

gzip_types text/plain text/css application/json application/javascript;

完整配置

gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml+rss
    application/xml
    image/svg+xml
    application/xhtml+xml
    application/x-javascript
    application/rss+xml;

完整Gzip配置

生产环境配置

gzip on;
gzip_vary on;
gzip_min_length 1000;
gzip_comp_level 6;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/xml+rss
    application/xml
    image/svg+xml;
gzip_disable "msie6";

参数说明

gzip

• 启用或禁用Gzip压缩
• 默认值：off

gzip_vary

• 添加Vary响应头
• 默认值：off

gzip_min_length

• 最小压缩文件大小
• 默认值：20

gzip_comp_level

• 压缩级别
• 默认值：1

gzip_types

• 压缩的MIME类型
• 默认值：text/html

gzip_disable

• 禁用特定浏览器的压缩
• 默认值：无

Brotli压缩

安装模块

Brotli压缩需要安装ngx_brotli模块。

配置Brotli

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript;

同时使用Gzip和Brotli

gzip on;
gzip_comp_level 4;
gzip_types text/plain text/css application/json application/javascript;

brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript;

静态资源压缩

HTML文件

gzip_types text/html;

CSS文件

gzip_types text/css;

JavaScript文件

gzip_types application/javascript text/javascript;

JSON文件

gzip_types application/json;

XML文件

gzip_types text/xml application/xml;

SVG文件

gzip_types image/svg+xml;

压缩测试

测试压缩

curl -H "Accept-Encoding: gzip" -I http://example.com/style.css

查看响应头

Content-Encoding: gzip
Content-Type: text/css

检查压缩率

# 原始大小
curl -o original.css http://example.com/style.css
ls -lh original.css

# 压缩后大小
curl -H "Accept-Encoding: gzip" -o compressed.css.gz http://example.com/style.css
ls -lh compressed.css.gz

性能优化

压缩级别选择

# 低压缩率，低CPU消耗
gzip_comp_level 1;

# 中压缩率，中等CPU消耗（推荐）
gzip_comp_level 6;

# 高压缩率，高CPU消耗
gzip_comp_level 9;

最小文件大小

# 小于1KB的文件不压缩
gzip_min_length 1000;

# 小于500B的文件不压缩
gzip_min_length 500;

禁用特定浏览器

# 禁用IE6
gzip_disable "msie6";

# 禁用特定版本
gzip_disable "MSIE [1-6]\.";

完整示例

生产环境配置

server {
    listen 80;
    server_name static.example.com;

    root /var/www/static;

    # Gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1000;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml+rss
        application/xml
        image/svg+xml;
    gzip_disable "msie6";

    # Brotli压缩（如果已安装）
    brotli on;
    brotli_comp_level 6;
    brotli_types
        text/plain
        text/css
        application/json
        application/javascript;

    # 静态资源
    location ~* \.(css|js)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

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

常见问题

压缩不生效

原因： 文件类型不在gzip_types中

解决： 添加文件类型

gzip_types text/plain text/css application/json application/javascript;

压缩率低

原因： 压缩级别过低

解决： 提高压缩级别

gzip_comp_level 6;

CPU使用率高

原因： 压缩级别过高

解决： 降低压缩级别

gzip_comp_level 4;

总结

静态资源压缩的关键点：

• Gzip压缩：启用并配置压缩级别
• 压缩类型：指定需要压缩的文件类型
• Brotli压缩：更高的压缩率
• 性能优化：选择合适的压缩级别
• 测试验证：确保压缩生效

合理配置压缩，减少传输数据量，提高网站加载速度。