静态资源合并压缩Nginx配置节省带宽

知识分享

2026-07-18 18:00

11 阅读

为什么要做静态资源合并压缩

网站中的 CSS、JS、图片等静态文件每次请求都会消耗带宽和连接数。
如果文件体积大且数量多，不仅拖慢首屏加载，还会让服务器带宽迅速飙升。
通过 Nginx 开启 gzip 压缩可以大幅减小传输体积，再配合静态资源合并（把多个小文件合成一个大文件）减少请求次数，双管齐下能节省 50% 以上的带宽。
本文适合刚接触服务器运维的站长，无论你用的是宝塔面板还是裸机 Nginx，都能按步骤操作成功。

开始前的准备工作

在动手之前先确认你的环境是否满足要求：

已安装 Nginx（建议版本 >= 1.10，宝塔面板用户直接登录后台即可）。
拥有服务器的 root 权限或 sudo 权限。
准备好要优化的静态资源目录（如 /www/wwwroot/your-site/assets）。
如果是手动编译 Nginx，需确认是否已安装 ngx_http_gzip_module（默认自带）以及可能用到的 ngx_http_concat_module（需要额外编译）。

第一步：开启 Nginx gzip 压缩

gzip 是最直接的带宽节省手段，开启后 Nginx 会动态压缩文本类文件（html、css、js、xml、svg 等），浏览器自动解压渲染。

手动修改 nginx.conf

找到 Nginx 主配置文件，通常位于 /etc/nginx/nginx.conf 或 /usr/local/nginx/conf/nginx.conf。
在 http 块内添加或修改以下配置：

http {
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 6;
    gzip_vary on;
    gzip_disable "msie6";
    gzip_types text/plain text/css application/javascript application/json image/svg+xml application/xml application/font-woff application/font-woff2;
    gzip_proxied any;
    gzip_buffers 16 8k;
}

配置说明：

gzip on：开启压缩。
gzip_comp_level 6：压缩等级 1-9，6 是平衡体积与 CPU 的推荐值。
gzip_types：声明要压缩的 MIME 类型，不要漏掉 application/javascript 和 application/json。
gzip_min_length 1k：小于 1KB 的文件不压缩，避免浪费 CPU。

保存后测试配置并重载：

nginx -t
systemctl reload nginx   # 或 nginx -s reload

宝塔面板操作路径

宝塔用户更简单：登录面板 → 网站 → 点击对应网站的“设置” → 左侧“性能调优” → 找到“启用 Gzip 压缩”并打开 → 保存。
面板会自动生成类似上面的配置，无需手动编辑。

第二步：合并静态资源文件

合并资源的原理是把多个 CSS/JS 请求合并成一个，彻底减少 HTTP 请求次数。
Nginx 官方推荐使用 ngx_http_concat_module，该模块由淘宝团队开源，支持自动合并。

编译安装 ngx_http_concat_module

如果你用的是宝塔或一键安装的 Nginx，通常不包含此模块。
需要重新编译 Nginx 或使用动态模块。
以下是以 --add-module 方式编译的示例：

# 下载模块源码
cd /opt
git clone https://github.com/alibaba/nginx-http-concat.git

# 进入 Nginx 源码目录（以1.24.0为例）
wget http://nginx.org/download/nginx-1.24.0.tar.gz
tar -zxvf nginx-1.24.0.tar.gz
cd nginx-1.24.0

# 配置并编译
./configure --prefix=/usr/local/nginx --add-module=../nginx-http-concat
make && make install

编译完成后替换原有 Nginx 二进制文件，注意备份。
宝塔用户建议在面板中通过“安装扩展 - Nginx自定义编译”添加，或者直接购买或使用第三方编译好的动态模块。

配置静态资源合并

在 server 或 location 块中添加：

location /assets/ {
    concat on;
    concat_max_files 20;
    concat_unique on;
    concat_types application/javascript text/css;
}

concat on：开启合并功能。
concat_max_files 20：一次最多合并 20 个文件。
concat_types：指定合并的文件类型（只合并 JS 和 CSS）。

配置完成后，原本需要多次请求的可以改写为，Nginx 就会自动将两个文件合并返回。
注意 URL 中的 ? ? 是模块约定的分隔符。

检查压缩和合并效果

验证 gzip 压缩

用浏览器开发者工具（F12）打开 Network 面板，刷新页面后点击任意一个 CSS/JS 请求，查看 Response Headers 中是否包含 Content-Encoding: gzip。
如果看到，说明压缩生效。

验证合并功能

访问类似 http://your-domain/assets/? ?style1.css,style2.css 的合并 URL，看返回内容是否包含两个文件的内容，并且响应头中 Content-Type 正确。
也可以对比请求数：原来需要多少个文件，合并后只发了 1 个。

带宽节省估算

可以使用在线带宽压缩前后对比工具（如 GTmetrix、PageSpeed Insights）或直接查看服务器监控的流量统计。
通常开启 gzip 后 CSS/JS 体积减少约 60%-80%，合并请求数减少后总流量下降更明显。

踩坑提醒与高频疑问

问题1：gzip 等级设置过高导致 CPU 飙升

解答：gzip_comp_level 超过 7 后压缩率提升很小，CPU 消耗却大增。
建议保持 5-6，如果服务器性能较差可以降到 3。

问题2：concat 合并后浏览器缓存失效

解答：合并后的 URL 会改变（因为 ? ? 后面的文件名变化），建议在 HTML 中动态生成合并 URL 时加上版本号或文件 MD5，确保缓存及时刷新。
同时配置 expires 指令：

location /assets/ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

问题3：宝塔面板怎么添加 concat 模块？

解答：宝塔官方未默认集成，需要自行编译。
可以在面板的“软件商店 - Nginx - 设置 - 安装扩展 - 自定义编译”中勾选 ngx_http_concat_module 后重新安装。
如果嫌麻烦，也可以使用前端构建工具（如 Webpack）在构建时提前合并文件，Nginx 只做压缩和缓存。

问题4：gzip 已开启但某些资源没压缩

解答：检查 gzip_types 是否包含对应的 MIME 类型，特别是一些较新的格式如 application/wasm 或 image/avif。
另外确保资源大小超过 gzip_min_length。

如果你正在处理静态资源合并压缩以节省带宽的场景，建议先按照本文步骤依次开启 gzip 和 concat（或前端合并），然后通过浏览器验证效果。
如果遇到异常，优先回看避坑部分和上面的 FAQ，大部分问题都是配置遗漏或模块缺失导致。

黑白名单批量配置服务器访问权限管控：从零开始的安全加固指南

容器镜像瘦身自动化脚本减少存储占用