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

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.fbzl.org;

    root /data/site/www.fbzl.org;
    location /static/ {
        concat on;
        concat_max_files 20;
        concat_unique off;
    }
}

4. 测试nginx concat

我的站点有调用到static/concat.css和static/concat.js两个文件，为了提高站点访问速度，我决定使用nginx的concat模块将两个请求合并为一个。
合并前

www.fbzl.org/static/css/concat.css
www.fbzl.org/static/js/concat.js

合并后

http://www.fbzl.org/js/concat.js,css/concat.css?ver=123

测试之前，准备一下文件.

cd /data/site/www.fbzl.org/static
cat js/concat.js
cat js/a.js
cat css/a.css
cat css/concat.css

curl http://www.fbzl.org/static/??css/concat.css,css/a.css

curl http://www.fbzl.org/static/??js/concat.js,js/a.js

4.3 js与css合并

curl http://www.fbzl.org/static/??js/concat.js,css/concat.css

curl http://www.fbzl.org/static/??css/concat.css,css/a.css?v=123

js：

<script src="??bar1.js,bar22.css,subdir/bar3.js?v=3245" />

以上意思是将ba1.Js，bar22.css和subdir/bar3.js这三个请求合并为一个，并且版本号为3245.

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