linux 上源码安装Nginx (concat模块) js、css多个请求合并为一个请求

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.安装PCRE库

 安装之前必须保证安装GCC++安装包

如果是debian系统，运行：

[plain]  view plain copy print ?

1. apt-get install gcc g++ autoconf  

如果是redhat系统，运行：

[plain]  view plain copy print ?

1. yum -y install gcc-c++  

然后安装：ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/ 下载最新的 PCRE 源码包，使用下面命令下载编译和安装 PCRE 包：

cd /usr/local/src

wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.21.tar.gz
tar -zxvf pcre-8.21.tar.gz
cd pcre-8.21
./configure
make
make install

或者安装rpm包也行

2.安装zlib库
http://zlib.net/zlib-1.2.7.tar.gz 下载最新的 zlib 源码包，使用下面命令下载编译和安装 zlib包：

cd /usr/local/src

wget http://zlib.net/zlib-1.2.7.tar.gz
tar -zxvf zlib-1.2.7.tar.gz
cd zlib-1.2.7
./configure
make
make install

或者安装rpm包也行

3. 安装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

 不要将

--prefix=/usr/local/nginx-1.4.2

和解压目录放在一起

安装成功，执行命令：

[root@localhost conf]# /usr/local/nginx-1.4.2/sbin/nginx

有可能出现以下错误：

/usr/local/nginx/sbin/nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object file: No such file or directory

从错误看出是缺少lib文件导致，进一步查看下

[root@localhost conf]# ldd $(which /usr/local/nginx-1.4.2/sbin/nginx)
linux-gate.so.1 => (0x0071b000)
libpthread.so.0 => /lib/libpthread.so.0 (0×00498000)
libcrypt.so.1 => /lib/libcrypt.so.1 (0×00986000)
libpcre.so.1 => not found
libcrypto.so.6 => /lib/libcrypto.so.6 (0×00196000)
libz.so.1 => /lib/libz.so.1 (0×00610000)
libc.so.6 => /lib/libc.so.6 (0x002d7000)
/lib/ld-linux.so.2 (0x006a8000)
libdl.so.2 => /lib/libdl.so.2 (0x008c3000)

可以看出 libpcre.so.1 => not found 并没有找到，进入/lib目录中手动链接下

[root@localhost lib]# ln -s libpcre.so.0.0.1 libpcre.so.1

然后在启动nginx ok 了

4. 指令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等

5. 配置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;
    }
}

6. 测试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 filettlsa_concat.js
# cat js/a.js             
// this is js filea.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 filettlsa_concat.js
// this is js filea.js

4.3 js与css合并

# curl http://www.ttlsa.com/static/??js/ttlsa_concat.js,css/ttlsa_concat.css
// this is js filettlsa_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：

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

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

css:

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

这边也是一个道理,只不过只包含css.

5. 结束语
减少web请求在一定程度上能减少web服务器的压力，简单的使用nginx concat模块便可以实现这个功能，不过需要前端设计师来使用。如果想减少web请求，又不想让前端设计师来插手的话，大家可以参考下google出的pagespeed模块