Nginx实现合并多个静态文件，减少http请求

为什么80%的码农都做不了架构师？>>>   

nginx-http-concat 是由淘宝开发的一个 Nginx 模块，可以实现多个静态文件的合并，安装完成后的调用方式，如下：

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

安装步骤：

1、因为nginx添加新模块需要重新编译，所以我们要先知道自己已经安装nginx版本与之前安装模块列表

# nginx -V

‍其中 nginx version 是版本号，configure arguments 为已经安装的模块列表‍

2、得到自己的nginx版本号后，我们再去nginx官网下载对应版本文件(我的nginx版本是v1.4.4)

# wget http://nginx.org/download/nginx-1.4.4.tar.gz

3、解压 nginx-1.4.4.tar.gz 并进入目录

# tar -xf nginx-1.4.4.tar.gz
# cd nginx-1.4.4

4、下载 nginx-http-concat

# git clone git://github.com/alibaba/nginx-http-concat.git

5、配置模块并编译

# ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --without-http-cache --with-http_ssl_module --with-http_gzip_static_module --add-module=/root/nginx-1.4.4/nginx-http-concat
# make

这里记得不要用 make install,否则会直接覆盖之前的nginx

6、备份原来的 nginx，并替换最新nginx(替换之前先关闭nginx)

# cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
# cp objs/nginx /usr/local/nginx/sbin/nginx

7、配置 concat(配置成功后记得重启nginx)

location /js/ {
	concat on;  
	# 允许concat最大的文件数
	concat_max_files 10;  
	# 只允许相同类型的文件
	concat_unique on;  
	# 允许内容的类型  
	concat_types application/x-javascript,text/css;  
}

8、测试是否成功

    8.1、我们在js目录下分别创建1.js和2.js

//1.js
console.log('1.js load success!');

//2.js 
console.log('2.js load success!');

    8.2、在页面上引入合并后的js

<script src="./js/??1.js,2.js"></script>

    8.3、执行结果

    

9、K.O

PS:APACHE也有一个类似功能的插件 mod concatx，有兴趣的童鞋可以去了解一下。

转载于:https://my.oschina.net/jathon/blog/489458