Nginx 動態添加 nginx-http-concat 模組：合併請求優化前端性能

模組介紹

nginx-http-concat 是阿里巴巴開源的 Nginx 模組，支援將多個 JS/CSS 請求合併為單一請求，減少 HTTP 連接數，提升頁面加載速度。

編譯安裝步驟

# 1. 下載模組源碼
git clone https://github.com/alibaba/nginx-http-concat.git

# 2. 重新配置 Nginx（--add-module 指向模組目錄）
./configure --prefix=/myhome/nginx/nginx --add-module=../nginx-http-concat-master

# 3. 編譯並安裝
make && make install

注意：必須完整重新編譯 Nginx，不可僅 make 模組目錄。

配置示例

location /static/ {
    concat on;                    # 啟用合併
    concat_max_files 20;          # 最大合併文件數
    concat_unique off;            # 是否去重
    concat_types text/css application/javascript;  # 支援類型
    alias /data/static/;          # 靜態資源實際目錄
}

前端調用方式

<!-- 合併請求：雙問號分隔文件 -->
<script src="/static/js/a.js??b.js,c.js"></script>
<link rel="stylesheet" href="/static/css/base.css??theme.css,layout.css">

驗證效果

瀏覽器 Network 面板可見：多個文件合併為單一響應，響應頭包含 Content-Type: application/javascript 或 text/css。

避坑指南

• Nginx 1.5+ 版本 MIME 類型變更，需修改模組源碼 ngx_http_concat_module.c 增加 application/javascript（詳見相關文章）
• 生產環境建議啟用 concat_unique on 避免重複加載
• 配合 CDN 緩存策略，合併響應可設較長 Cache-Control

總結

通過 --add-module 靜態編譯第三方模組是 Nginx 擴展功能的標準方式。nginx-http-concat 配置簡單、效果顯著，是前端性能優化的利器。