使用nginx-http-concat添加nginx資源請求合並功能

　　web項目中有時候一個頁面會加載多個js或css資源請求，導致頁面加載耗時較長，這時優化的方向可以采用資源合並，可以在客戶端事先合並，也可以在服務端進行資源合並，服務端合並的方式使用起來更靈活。

　　nginx-http-concat是阿里雲開發的nginx開源組件，可以在nginx編譯安裝時添加模塊，也可以在已安裝的nginx中重新添加模塊。

一、已安裝的nginx添加nginx-http-concat模塊

　　已安裝的nginx添加module，需要重新進行編譯覆蓋，這點與apache不同，apache只需要添加module，然后添加引用即可。

1、添加nginx編譯腳本

　  1) 查看當前nginx版本，命令：/usr/local/sbin/nginx -v

　  2) 下載相應的nginx源碼版本，地址：http://nginx.org/download/

　  3) 上傳到服務器並解壓

 2、添加nginx-http-concat源碼

　  1) 下載module，git地址：https://github.com/alibaba/nginx-http-concat

　  2) 上傳到服務器並解壓，本實驗解壓地址：/usr/local/nginx/third_module/nginx-http-concat

3、執行重新編譯

　  1) 查看當前nginx編譯參數，執行命令：/usr/local/sbin/nginx -V

　  2) 進入nginx源碼目錄，在獲取的編譯參數中添加：--add-module=/usr/local/nginx/thrid_module/nginx-http-concat，執行添加后的命令，如：./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_spdy_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module --add-module=/usr/local/nginx/third_module/nginx-http-concat

　  3) 執行編譯命令：make，注意編譯之后千萬不能執行make install

　  4) 編譯完后，當前nginx源碼目錄下生成objs目錄則說明編譯成功

4、覆蓋nginx執行腳本

　  1) 備份當前nginx執行腳本，命令：cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak。如果拷貝出錯，則將nginx進行殺掉再進行，命令：killall nginx

　  2) 拷貝上一步驟編譯后的新nginx腳本，命令：cp /mnw/download/nginx-1.8.0/objs/nginx /usr/local/nginx/sbin/

　  3) 查看編譯參數，命令：/usr/local/nginx/sbin/nginx -V，如果編譯參數中存在剛添加的模塊，則說明編譯成功

　  4) 重啟nginx

二、配置使用nginx-http-concat模塊

1、配置項

　  1) concat，是否打開資源合並開關，選項：on | off，默認：off

　  2) concat_types，模塊處理的資源類型，默認：text/css application/x-javascript

　  3) concat_unique，是否允許合並不同類型的資源，選項：on | off，默認：on

　  4) concat_max_files，允許合並的最大資源數目，默認：10

　  5) concat_delimiter，合並后的文件內容分隔符，用於區分不同文件的內容

　  6) concat_ignore_file_error，是否忽略404或403錯誤，選項：on | off，默認：off

2、配置實例

　  1) nginx添加配置

location /static/css/ {
    concat on;
    concat_delimiter /* my file */; 
}

　  2) 重啟nginx，命令：/usr/local/nginx/sbin/nginx -s reload

　  3) 創建測試文件，在web目錄下創建/static/css目錄，並創建文件a.css、b.css，內容隨意。

　  4) 請求地址：http://localhost/my-web/static/css??a.css,b.css，如看到返回a.css、b.css合並內容，則整個配置完成。注意，url中static/css目錄必須真實存在，且a.css與b.css必須位於此目錄中。