Nginx content阶段 http-concat-master模块提升多个小文件性能

mod_concat模块 


mod_concat 模块由淘宝开发(能将js、 css 多个请求合并为一个请求),目前已经包含在 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

 

可以看到大部分请求使用了两个问号加多个文件,后面使用逗号方式去返回其内容的。 

 

concat指令块和指令


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 等

 

安装nginx concat 


[root@www src]# wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concatmaster.zip

[root@www src]# unzip nginx-http-concatmaster.zip

Archive:  nginx-http-concatmaster.zip

b8d3e7ec511724a6900ba3915df6b504337891a9

   creating: nginx-http-concat-master/

  inflating: nginx-http-concat-master/README.md  

  inflating: nginx-http-concat-master/config  

  inflating: nginx-http-concat-master/ngx_http_concat_module.c

[root@www nginx-1.16.1]# ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --add-module=../nginx-http-concat-master

 [root@www nginx-1.16.1]# make && make install

 [root@www nginx-1.16.1]#make upgrade

[root@www nginx-1.16.1]# /usr/local/nginx/sbin/nginx -V

nginx version: nginx/1.16.1

built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC)

configure arguments: --prefix=/usr/local/nginx --with-http_stub_status_module --add-module=../nginx-http-concat-master

 

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

 

测试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 file ttlsa_concat.js
# cat js/a.js
// this is js file a.js

# cat css/a.css
/** this is css a.css **/
# cat css/ttlsa_concat.css
/** this is css ttlsa_concat.css **/

(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 *

(2)两个 js 合并

# curl http://www.ttlsa.com/static/??js/ttlsa_concat.js,js/a.js
// this is js file ttlsa_concat.js
// this is js file a.js

(3) js 与 css 合并

# curl http://www.ttlsa.com/static/??js/ttlsa_concat.js,css/ttlsa_concat.css
// this is js file ttlsa_concat.js
/** this is css ttlsa_concat.css **/

(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.


总结


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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章