nginx多個請求合並

nginx js、css多個請求合並為一個請求(concat模塊)

模塊介紹

mod_concat模塊由淘寶開發，目前已經包含在tengine中，並且淘寶已經在使用這個nginx模塊。不過塔暫時沒有包含在nginx中。這個模塊類似於apache中的modconcat。如果需要使用它，需要使用兩個”?”問號.

來個范例：

http://example.com/??style1.css,style2.css,foo/style3.css

以上將原先3個請求合並為1個請求

如果你擔心文件被用戶的瀏覽器緩存而沒有及時更新，你依舊可以帶上一個版本號的參數，如下：

http://example.com/??style1.css,style2.css,foo/style3.css?v=102234

1. 安裝nginx concat

# cd /usr/local/src/
# wget http://nginx.org/download/nginx-1.4.2.tar.gz
# wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
# unzip nginx-http-concat-master.zip
# tar -xzvf nginx-1.4.2.tar.gz
# cd nginx-1.4.2
# ./configure --prefix=/usr/local/nginx-1.4.2 --with-http_stub_status_module　\
--add-module=../nginx-http-concat-master
# make
# make install

2. 指令directives

concat on | off
default: concat off
context: http, server, location
開啟火關閉concat

concat_types MIME types
default: concat_types: text/css application/x-javascript
context: http, server, location
Defines the MIME types which can be concatenated in a given context.
在給定的配置段中可以被合並的MIME文件類型.

concat_unique on | off
default: concat_unique on
context: http, server, location
是否只允許同類型文件（相同MIME文件）合並。例如，設置為off，那么js和css文件可以合並。默認情況下，這個值是on，意味着只有相同的類型文件才能合並。

如果希望js和css能夠合並為一個請求，那么你必須設置concat_unique off，其他類型文件也可以用同樣的方式合並.如下為OFF才可以的請求：

http://example.com/static/??foo.css,bar/foobaz.js

concat_max_files numberp
default: concat_max_files 10
context: http, server, location
定義一個給定的配置段里面允許合並文件的數量，默認最多10個.不過一定要注意，uri不要超過系統的規定的page size，在linux里面執行getconf PAGESIZE可以獲取系統的限制.通常限制是4096字節。

concat_delimiter: string
default: NONE
context: http, server, locatione
定義文件分隔符

concat_ignore_file_error: on | off
default: off
context: http, server, location
是否忽略文件請求錯誤，例如404和403等

3. 配置nginx

server {
listen    80;
server_name www.ttlsa.com;
root /data/site/www.ttlsa.com;
location /static/ {
     concat on;
     concat_max_files 20;
     concat_unique off;
     concat_types text/css application/javascript;
  }
}

#注解:
concat on; #開啟concat模塊的功能
concat_max_files 20; #合並文件的最大數量（超出提示http400 錯誤）
concat_unique off #off關閉同類型文件(相同MIME文件)合並,也就是說開啟了不同類型文件可以合並(例如:css與js兩種類型合並)
concat_types text/css application/javascript; #定義可以合並的文件類型

4. 測試nginx concat

我的站點有調用到static/ttlsa_concat.css和static/ttlsa_concat.js兩個文件，為了提高站點訪問速度，我決定使用nginx的concat模塊將兩個請求合並為一個。
合並前
www.ttlsa.com/static/css/ttsa_concat.css
www.ttlsa.com/static/js/ttsa_concat.js

合並后

http://www.ttlsa.com/static??js/ttlsa_concat.js,css/ttlsa_concat.css?ver=123

測試之前，准備一下文件.

# cd /data/site/www.ttlsa.com/static
# cat js/ttlsa_concat.js  
// this is js ``file` `ttlsa_concat.js
# cat js/a.js       
// this is js ``file` `a.js
# cat css/a.css
/** this is css a.css **/
# cat css/ttlsa_concat.css
/** this is css ttlsa_concat.css **/

4.1 兩個css合並

# curl http://www.ttlsa.com/static/??css/ttlsa_concat.css,css/a.css
/** this is css ttlsa_concat.css **/
/** this is css a.css *

4.2 兩個js合並

# curl http://www.ttlsa.com/static/??js/ttlsa_concat.js,js/a.js  
// this is js ``file` `ttlsa_concat.js
// this is js ``file` `a.js

4.3 js與css合並

# curl http://www.ttlsa.com/static/??js/ttlsa_concat.js,css/ttlsa_concat.css
// this is js ``file` `ttlsa_concat.js
/** this is css ttlsa_concat.css **/

4.4 帶版本號參數

# curl http://www.ttlsa.com/static/??css/ttlsa_concat.css,css/a.css?123
/** this is css ttlsa_concat.css **/
/** this is css a.css *

以上僅僅用了兩個文件來測試，在具體應用中，大家可以使用多個，具體幾個由你的nginx配置來控制. 在具體的環境中，都是以下方式來調用，以下方法摘自官方文檔.
js：

"??bar1.js,bar22.css,subdir/bar3.js?v=3245"` `/>

以上意思是將ba1.Js，bar22.css和subdir/bar3.js這三個請求合並為一個，並且版本號為3245.

css:

"stylesheet"` `href=``"??foo1.css,foo2.css,subdir/foo3.css?v=2345"` `/>

這邊也是一個道理,只不過只包含css.

5. 結束語

減少web請求在一定程度上能減少web服務器的壓力，簡單的使用nginx concat模塊便可以實現這個功能，不過需要前端設計師來使用。如果想減少web請求，又不想讓前端設計師來插手的話，大家可以參考下google出的pagespeed模塊