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

作者：LinuxHub   发布：2016-07-01 16:08   分类： Nginx    

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