nginx js、css多个请求合并为一个请求(concat模块)
2017-02-24 17:30
573 查看
模块介绍 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
?
2. 指令directives 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等 3. 配置nginx
?
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 测试之前,准备一下文件.
?
4.1 两个css合并
?
/**
this is css ttlsa_concat.css **/
/**
this is css a.css *
4.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
4.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.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:
?
?
# 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 | 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等 3. 配置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; } }
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 测试之前,准备一下文件.
?
# 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 **/
4.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 *
4.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
4.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.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:
?
相关文章推荐
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- nginx js、css多个请求合并为一个请求(concat模块)
- linux 上源码安装Nginx (concat模块) js、css多个请求合并为一个请求
- nginx插件之concat模块js、css多个请求合并,减少请求数
- nginx js/css合并请求(nginx-http-concat-master)模块
- Nginx模块js与css多个请求合并为一个请求
- Tengine的concat模块合并静态文件减少请求数
- 三.组合多个CSS、JavaScript文件的访问请求变成一个请求(ngx_http_concat_module)
- JS&CSS文件请求合并及压缩处理研究(四)
- Nginx合并静态资源(concat模块)
- Web性能优化-合并js与css,减少请求
- 2.5 将模块合并成一个程序集 - 2
- [前端优化] 使用Combres合并对js、css文件的请求