Nginx模块js与css多个请求合并为一个请求
模块: nginx-http-concat
作用: 将多个css或js文件合并成一个请求
模块开源地址: https://github.com/alibaba/nginx-http-concat
模块维基文档: https://www.nginx.com/resources/wiki/modules/concat
1.模块下载
1
2
|
wget
https
:
/
/
github
.com
/
alibaba
/
nginx
-
http
-
concat
/
archive
/
master
.zip
-
O
nginx
-
http
-
concat
-
master
.zip
unzip
nginx
-
http
-
concat
-
master
.zip
|
2.添加模块
1
|
--
add
-
module
=
.
.
/
nginx
-
http
-
concat
-
master
|
模块编译方法参照: http://www.linuxhub.org/?p=3220
3.测试验证
3.1.Nginx配置
1
2
3
4
5
6
|
location
/
static
/
{
concat
on
;
concat_max
_files
20
;
concat_unique
off
;
concat_types
text
/
css
application
/
javascript
;
}
|
1
2
3
4
5
|
#注解:
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
|