Nginx合并客户端请求

一、引言：HTTP/1.1 的“并发瓶颈”

在 HTTP/1.1 时代，浏览器对同一域名的并发请求数量有严格限制（通常为 6-8 个）。这意味着，如果你的页面需要加载 20 个 CSS 和 JS 文件，浏览器必须分批次串行下载，导致：

• 首屏渲染延迟：关键资源被非关键资源阻塞。
• TCP/TLS 开销放大：每个请求都需经历 TCP 握手、TLS 协商等固定开销。
• 服务器压力增加：处理大量小文件请求比处理少量大文件请求更消耗 CPU。

虽然 HTTP/2 通过多路复用解决了此问题，但仍有大量用户停留在 HTTP/1.1 网络环境（如老旧企业内网、部分移动网络）。

解决方案：在服务端将多个小文件动态合并成一个文件返回。这正是 ngx_http_concat_module 模块的核心价值。

💡 核心价值：
通过一次请求获取多个静态资源，将“多次小请求”变为“一次大请求”，完美规避 HTTP/1.1 并发限制，显著提升页面加载速度！

二、核心模块：ngx_http_concat_module

1. 模块简介

ngx_http_concat_module 是由 淘宝（现阿里）开发的 Nginx 第三方模块。它允许客户端在一个 URL 中指定多个文件路径，Nginx 在服务端将这些文件读取、拼接后，作为一个响应体返回。

⚠️ 重要提示：该模块不是 Nginx 官方内置模块，需要手动编译安装。

2. 工作原理

• 客户端请求：http://example.com/??style1.css,style2.css,script1.js
• Nginx 处理：
• 解析 URL 中 ?? 后的文件列表。
• 依次读取磁盘上的 style1.css, style2.css, script1.js。
• 将文件内容按顺序拼接成一个大的字符串。
• 根据第一个文件的 MIME 类型（或自定义规则）设置 Content-Type。
• 返回合并后的响应。
• 浏览器接收：像处理普通 CSS/JS 文件一样解析和执行。

三、安装与配置实战

Step 1: 下载模块源码

cd /usr/local/src
git clone https://github.com/alibaba/nginx-http-concat.git

Step 2: 重新编译 Nginx

前提：你必须拥有当前 Nginx 的源码，并使用完全相同的编译参数。

# 进入 Nginx 源码目录
cd /usr/local/src/nginx-1.24.0

# 使用 nginx -V 查看的原始参数，追加 –add-module
./configure \\
–prefix=/etc/nginx \\
–sbin-path=/usr/sbin/nginx \\
–modules-path=/usr/lib64/nginx/modules \\
–with-http_ssl_module \\
–with-http_v2_module \\
–add-module=/usr/local/src/nginx-http-concat # ← 添加 concat 模块

make && sudo make install

Step 3: 核心配置指令

在 server 或 location 块中添加以下配置：

server {
listen 80;
server_name example.com;
root /var/www/html;

location /static/ {
# 启用 concat 功能
concat on;

# 最大可合并的文件数量 (默认 10)
concat_max_files 20;

# 是否允许跨目录合并 (默认 off, 更安全)
concat_unique on;

# 合并后响应的 MIME 类型 (默认以第一个文件为准)
# concat_types text/css application/javascript;
}
}

指令详解

四、使用方法与最佳实践

1. 客户端调用方式

URL 格式为：http://<domain>/<path>/??<file1>,<file2>,…,<fileN>[?<version>]

• 双问号 ??：是模块的固定语法，用于区分普通路径。
• 逗号分隔：文件路径列表，相对于 root 或 alias 目录。
• 版本号：可在末尾添加查询参数用于缓存刷新。

<!– 合并前：3个独立请求 –>
<link rel="stylesheet" href="/static/css/reset.css">
<link rel="stylesheet" href="/static/css/layout.css">
<link rel="stylesheet" href="/static/css/theme.css">

<!– 合并后：1个请求 –>
<link rel="stylesheet" href="/static/??css/reset.css,css/layout.css,css/theme.css?v=1.2.3">

2. 生产环境最佳实践

(1) 与构建工具结合

虽然 concat 提供了运行时灵活性，但在生产环境中，更推荐在构建阶段（Webpack/Vite）完成资源合并。原因如下：

• 零运行时开销：避免每次请求都进行文件读取和拼接。
• 更强的缓存控制：合并后的文件名可包含 hash，实现永久缓存。
• Tree Shaking：构建工具能进行代码分析，移除无用代码。

concat 模块更适合用于开发环境或无法修改前端代码的遗留系统。

(2) 安全加固

• 限制 concat_unique on：防止攻击者通过 ../../../etc/passwd 这样的路径遍历读取敏感文件。
• 精确匹配 location：只对特定的静态资源目录（如 /static/）开启 concat。
• 设置 concat_max_files：防止恶意请求合并过多文件导致 OOM。

# 安全的配置示例
location ~ ^/static/(?<subdir>[^/]+)/(?<filename>.+)$ {
# 只允许访问 static 下的子目录
alias /var/www/assets/$subdir/;

# 仅对 js/css 目录开启 concat
if ($subdir = "js") {
concat on;
concat_types application/javascript;
}
if ($subdir = "css") {
concat on;
concat_types text/css;
}
}

(3) 缓存策略

合并后的响应应设置长期缓存，并通过 URL 版本号或 hash 来更新。

location /static/ {
concat on;
expires 1y;
add_header Cache-Control "public, immutable";
}

五、常见问题与避坑指南

1. Q: 合并 JS 和 CSS 会出错吗？

A: 会！模块默认以第一个文件的 MIME 类型作为整个响应的 Content-Type。如果第一个文件是 CSS，后续的 JS 代码会被浏览器当作 CSS 解析，导致静默失败。务必确保一次请求只合并同类型的文件。

2. Q: 为什么我的 URL 里只有一个问号 ? 不行？

A: 这是模块设计的特殊语法。单个 ? 会被 Nginx 视为普通的查询字符串分隔符，而 ?? 是模块识别合并请求的唯一标识。

3. Q: 能否替代 Webpack 的代码分割（Code Splitting）

A: 不能。concat 是粗粒度的文件拼接，无法实现按需加载（Lazy Loading）。现代应用应优先使用 Webpack/Vite 的动态 import() 实现精细化的代码分割。

4. Q: HTTP/2 环境下还需要它吗？

A: 不需要。HTTP/2 的多路复用特性已经解决了队头阻塞问题。在此环境下使用 concat 反而会破坏资源的独立缓存，得不偿失。

六、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！