静态代码压缩节省海外加载带宽：Nginx 开启 Gzip

知识分享

2026-07-17 05:00

15 阅读

如果你的网站面向海外用户，静态资源（CSS、JS、HTML）每次请求都要跨洋传输，体积越大，加载越慢，带宽费用也越高。静态代码压缩就是把这些文本文件在服务端实时压缩后再发送，浏览器自动解压，传输体积能减少一半以上。
本文以 Nginx 为例，带你在服务器上同时开启 Gzip 和 Brotli，让海外用户享受到更快的加载速度。

压缩不只是 Gzip：Brotli 在海外加速中的优势

Gzip 是经典的压缩算法，几乎所有浏览器都支持。
Brotli 是 Google 推出的新一代压缩格式，对文本文件的压缩率通常比 Gzip 高 10%-25%。海外网络延迟高，多压缩几个百分点就意味着少传几十 KB，提升非常明显。
现在主流浏览器（Chrome、Firefox、Edge）均已支持 Brotli，搭配 Nginx 模块可以同时支持两种算法，让客户端自动选择最优的压缩方式。

前置准备：检查服务器环境与模块支持

在开始配置前，你需要确认以下两点：

服务器已经安装了 Nginx，且版本不低于 1.9.0（推荐 1.18+）。
Brotli 压缩模块（ngx_brotli） 是否已编译进 Nginx。如果使用宝塔面板或 Oneinstack 等集成环境，Brotli 通常已内置；如果是自行编译的 Nginx，需要额外添加模块。

检查 Nginx 是否已支持 Brotli 的命令：

nginx -V 2>&1 | grep -o ngx_brotli

如果返回 ngx_brotli 则说明已安装；
如果为空，需要安装该模块（后面会提供安装指引）。

服务器配置实操：Nginx 开启 Gzip 与 Brotli

1. 修改 Nginx 配置文件

找到你的 Nginx 主配置文件（通常位于 /etc/nginx/nginx.conf 或 /usr/local/nginx/conf/nginx.conf），
在 http 块内添加以下压缩配置：

http {
    # -------------------- Gzip 配置 --------------------
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;

    # -------------------- Brotli 配置 --------------------
    brotli on;
    brotli_comp_level 6;
    brotli_min_length 256;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
}

参数说明（零基础版）：

gzip on / brotli on：开启对应压缩。
gzip_comp_level / brotli_comp_level：压缩级别，1-9 数值越大压缩率越高但消耗 CPU 更多。推荐 Gzip 用 5，Brotli 用 6，平衡效果与性能。
gzip_min_length：只压缩体积大于 256 字节的文件，避免压缩小文件浪费资源。
gzip_types / brotli_types：指定要压缩的 MIME 类型，必须包含 text/css、application/javascript 等静态代码文件，否则不会压缩。
gzip_vary on：在响应头添加 Vary: Accept-Encoding，帮助 CDN 正确处理不同编码的缓存。

2. 重启 Nginx 生效

配置修改后需要重启 Nginx：

nginx -t          # 先测试配置文件语法是否正确
systemctl restart nginx   # CentOS / Ubuntu 通用

如果使用宝塔面板，可以在“软件商店 → Nginx → 设置 → 配置修改”中直接编辑，然后点击重载配置。

3. 仅限未安装 Brotli 模块的环境：安装 ngx_brotli

如果上一步 nginx -V 未显示 Brotli，你可以通过编译方式添加。
这里给出最简单的方式（适用于 CentOS 7+/Ubuntu 20.04+ 且已安装 Nginx）：

# 下载 ngx_brotli 源码并动态编译为模块
cd /opt
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli && git submodule update --init

# 获取当前 Nginx 的编译参数
nginx -V 2>&1 | grep 'configure arguments' | awk -F: '{print $2}'
# 复制输出的参数，并追加 --add-dynamic-module=/opt/ngx_brotli
# 假设你之前编译参数是 ./configure ... ，则新命令如下：
./configure 原参数(替换) --add-dynamic-module=/opt/ngx_brotli
make -j$(nproc)
make install

编译完成后，
在 Nginx 主配置 http 块中加上 load_module modules/ngx_http_brotli_filter_module.so; 和 load_module modules/ngx_http_brotli_static_module.so;，
然后重载 Nginx。

避坑提醒：压缩级别、缓存与兼容性

压缩级别不要设置过高：Gzip 9 和 Brotli 11 会消耗大量 CPU，尤其是在高并发下可能增加响应时间。建议保持推荐值。
检查 CDN 是否支持 Brotli：如果使用了 Cloudflare、Akamai 等 CDN，它们通常会在边缘节点进行二次压缩，你需要确认源站的 Brotli 压缩方式是否与 CDN 兼容（多数 CDN 支持透传 Brotli 或自动转码）。
不要对图片、视频等已压缩格式启用 Brotli：JPEG、PNG、MP4 本身已是二进制压缩格式，再压缩不仅无效还会耗费资源，所以在 brotli_types 中不要添加 image/ 类型（SVG 属于文本格式，可以压缩）。
验证浏览器兼容性：少量旧版浏览器（如 IE11 以下）不支持 Brotli，但 Nginx 配置会自动根据请求头 Accept-Encoding 返回 Gzip 或 Brotli，所以同时开启两种是安全的。

效果验证：用 curl 和在线工具看压缩比

用 curl 检查响应头

在本地或者任意有网络的终端执行：

curl -I -H "Accept-Encoding: gzip, br" https://yourdomain.com/style.css

查看返回头中的 Content-Encoding，如果出现 gzip 或 br，说明压缩生效。

对比压缩前后文件大小

利用 curl 获取原始大小和压缩后大小：

# 获取原始文件大小（不压缩）
curl -s -o /dev/null -w "%{size_download}" https://yourdomain.com/app.js
# 获取压缩后大小
curl -s --compressed -o /dev/null -w "%{size_download}" https://yourdomain.com/app.js

两个数字相减即可算出节省的体积。
通常 CSS/JS 文件压缩率在 60%-75%。

使用在线工具（推荐站长工具）

访问 //www.giftofspeed.com/gzip-test/" target="_blank" rel="noopener noreferrer">https:
//www.giftofspeed.com/gzip-test/（或类似工具），
输入你的 JS/CSS 文件地址，
它会显示当前的压缩方式和压缩率，
并给出是否建议启用 Brotli 的评分。

高频问题解答

Q：我的服务器是 Apache，怎么配置静态代码压缩？
A：Apache 使用 mod_deflate 模块实现 Gzip，Brotli 则需额外安装 mod_brotli。原理类似，在 .htaccess 或配置文件中对 AddOutputFilterByType 设置相应类型。但考虑到性能和灵活性，建议迁移至 Nginx 或使用 Nginx 作为反向代理。

Q：开启压缩后 CPU 飙升怎么办？
A：检查是否对大量小文件进行了压缩，或者压缩级别过高。可以将 gzip_min_length 提高到 1024（1KB）。另外，对于动态生成的内容（如 PHP 页面），可以考虑在 Nginx 前加一层缓存（如 FastCGI Cache），减少重复压缩。

Q：压缩后浏览器显示乱码？
A：通常是后端未正确处理 Content-Encoding 头，或者 Nginx 配置中 gzip_types 遗漏了某些 MIME 类型。确保 CSS 类型为 text/css，JS 为 application/javascript 或 text/javascript。

总结与下一步建议

静态代码压缩是提升海外加载速度最直接的手段之一。
按照本文配置后，你的站点就能自动将 CSS、JS、HTML 文件压缩为 Gzip 或 Brotli 再传输，海外用户访问速度会有明显改善。
如果配合 CDN 使用，可以将静态资源缓存到全球节点，进一步降低延迟。
建议你后续检查一下图片格式是否已转为 WebP 或 AVIF，并开启 HTTP/2，多管齐下效果更佳。

WAF拦截SQL注入XSS海外恶意攻击

K8s Ingress Nginx漏洞升级修复教程