Nginx模块js与css多个请求合并为一个请求

Nginx模块js与css多个请求合并为一个请求

模块: nginx-http-concat
作用: 将多个css或js文件合并成一个请求
模块开源地址: https://github.com/alibaba/nginx-http-concat
模块维基文档: https://www.nginx.com/resources/wiki/modules/concat

1.模块下载

wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
unzip nginx-http-concat-master.zip
2.添加模块
–add-module=…/nginx-http-concat-master

模块编译方法参照: http://www.linuxhub.org/?p=3220

3.测试验证

3.1.Nginx配置

location /static/ {
concat on;
concat_max_files 20;
concat_unique off;
concat_types text/css application/javascript;
}

#注解:

concat on; #开启concat模块的功能
concat_max_files
20; #合并文件的最大数量（超出提示http
400 错误）
concat_unique
off
#off关闭同类型文件(相同MIME文件)合并,也就是说开启了不同类型文件可以合并(例如:
css与js两种类型合并)
concat_types
text/css
application/javascript; #定义可以合并的文件类型

3.2.网站目录文件结构

静态文件目录

[root@zeping ~]# mkdir /data/web/www.linuxhub.cn/static/css -p
[root@zeping ~]# mkdir /data/web/www.linuxhub.cn/static/js -p

css文件

[root@zeping ~]# vim /data/web/www.linuxhub.cn/static/css/1.css
[root@zeping ~]# vim /data/web/www.linuxhub.cn/static/css/2.css
[root@zeping ~]# vim /data/web/www.linuxhub.cn/static/css/3.css

js文件

[root@zeping ~]# vim /data/web/www.linuxhub.cn/static/js/1.js
[root@zeping ~]# vim /data/web/www.linuxhub.cn/static/js/2.js

3.3.访问地址

1
2
3
4
5
http://www.linuxhub.cn/static/css/1.css
http://www.linuxhub.cn/static/css/2.css
http://www.linuxhub.cn/static/css/3.css
http://www.linuxhub.cn/static/js/1.js
http://www.linuxhub.cn/static/js/2.js
3.4.合并后的访问地址

访问使用的时候，加两个”?”问号然后面的文件名或路径即可

1
2
3

2个css文件合并后访问地址

http://www.linuxhub.cn/static/??css/1.css,css/2.css

http://www.linuxhub.cn/static/css/??1.css,2.css

1
2
3

3个css文件合并后访问地址

http://www.linuxhub.cn/static/??css/1.css,css/2.css,css/3.css
http://www.linuxhub.cn/static/css/??1.css,2.css,3.css
1
2
3

2个js文件合并后访问地址

http://www.linuxhub.cn/static/??js/1.js,js/2.js

http://www.linuxhub.cn/static/js/??1.js,2.js

1
2

js与css文件合并访问地址

http://www.linuxhub.cn/static/??js/1.js,css/1.css
1
2
3

#带版本号（自宝义，用来发版后自动更新CDN缓存）

http://www.linuxhub.cn/static/??js/1.js,css/1.css?t=20160702

http://www.linuxhub.cn/static/??js/1.js,css/1.css?v=20160701