nginx js、css多个请求合并为一个请求(concat模块)
2015-11-30 11:53
686 查看
模块介绍
mod_concat模块由淘宝开发,目前已经包含在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
1. 安装nginx concat
1 2 3 4 5 6 7 8 9 10 | # cd /usr/local/src/ # wget http://nginx.org/download/nginx-1.4.2.tar.gz # wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip # unzip nginx-http-concat-master.zip # tar -xzvf nginx-1.4.2.tar.gz # cd nginx-1.4.2 # ./configure --prefix=/usr/local/nginx-1.4.2 --with-http_stub_status_module \ --add-module=../nginx-http-concat-master # make # make install |
2. 指令directives
concat on | offdefault: 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等
3. 配置nginx
1 2 3 4 5 6 7 8 9 10 11 12 | 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; } } |
4. 测试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 测试之前,准备一下文件.
1 2 3 4 5 6 7 8 9 | # 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 2 3 | # curl http://www.ttlsa.com/static/??css/ttlsa_concat.css,css/a.css /** this is css ttlsa_concat.css **/ /** this is css a.css * |
1 2 3 | # 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 |
1 2 3 | # 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 **/ |
1 2 3 | # 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 * |
js:
1 | <script src="??bar1.js,bar22.css,subdir/bar3.js?v=3245" /> |
css:
1 | <link rel="stylesheet" href="??foo1.css,foo2.css,subdir/foo3.css?v=2345" /> |
5. 结束语
减少web请求在一定程度上能减少web服务器的压力,简单的使用nginx concat模块便可以实现这个功能,不过需要前端设计师来使用。如果想减少web请求,又不想让前端设计师来插手的话,大家可以参考下google出的pagespeed模块6. 参考文章
官方:http://wiki.nginx.org/HttpConcatModule来源站点:运维生存时间 网址:http://www.ttlsa.com/html/3332.html
相关文章推荐
- nginx.conf配置文件的基本详解
- Nginx重写规则指南 转
- nginx做rails项目web服务器缓存配置方法
- Ubuntu下安装Nginx
- nginx服务配置---php服务接入
- Nginx和lvs在负载均衡方面的对比
- nginx php-fpm 输出php错误日志
- Nginx代码风格图示
- Centos安装nginx
- nginx---别名(alias)在ci框架的应用
- Debian 7/Ubuntu14.04 LNMP环境搭建
- wordpress 图片裁剪问题处理
- nginx+ngrok的配置
- Nginx配置文件nginx.conf中文详解(汇总)
- nginx的安装及配置
- nginx做mail proxy 的时候,把消息proxy到哪里去了 4000
- nginx 基本配置
- 开启reuse_port让Tengine性能提升3倍
- LVS Nginx HAProxy 优缺点
- Nginx配置