Nginx concat 配置及使用介紹

前台靜態資源js 和 css 文件可以使用合併的方式進行輸出，下面用圖例說明，假設有一個頁面有兩個js , file1.js 和 file2.js 傳統的訪問方式為從瀏覽器發送兩次請求到後端（此處為nginx），前台需要發送兩次請求建立兩個連接：

使用concat合併後請求方式如下：

可以看到使用concat模塊後，瀏覽器向後端發送一次http請求，nginx對file1.js和file2.js做合併處理，然後進行輸出，期間建立了一次http連接。下面將逐步講解如何在linux下安裝部署使用。

一、相關軟體安裝

1）下載nginx 合併輸出模塊

下載nginx concat：alibaba/nginx-http-concat

文檔： https://www.nginx.com/resources/wiki/modules/concat/

2）配置安裝ngx_openresty-1.7.7.2

./configure --prefix=/home/xyj/installsoft/ --with-http_gzip_static_module --add-module=/home/xyj/soft/nginx-http-concat-1.2.2 --with-pcre=/home/xyj/soft/pcre-8.41

3）make && make install

安裝完成之前的nginx文件會有一個自動備份後綴.old

二、nginx配置

1) 修改nginx配置文件

①　加入concat模塊：

語法：concat_unique on | off

默認：concat_unique on

配置段：http，server，location

是否只允許同類型文件（相同MIME文件）合併。例如，設置為off，那麼js和css文件可以合併；默認情況下，這個值為on，意味著只有相同的類型的文件才能合併；如果希望js和css能夠合併為一個請求，那麼你必須設置concat_unique off，其他類型文件也可以用同樣的方式合併。如（允許不同類型的MIME文件進行合併）：

②　concat_max_files

語法：concat_max_files number

默認：concat_max_files 10

配置段：http，server，location

定義一個給定配置段裡面允許合併的文件數量，默認最多10個，不過一定要注意，uri不要超過系統規定的page size，在linux裡面執行getconf PAGESIZE 可以獲取系統的限制，通常限制是4096位元組。

如配置最大合併文件為20個，則平均每個被合併的文件大小為4096/20，大約200位元組每隻。

③　遇到的問題

nginx concat模塊配置 頁面返回400 bad request ？

解決：

vi nginx/conf/mime.types

application/javascript js;

修改為

application/x-javascript js;

2) 前台配置訪問

http://127.0.0.1/static/??js/1.js,2.js,css/art.css,css/mycs.css