nginx js、css多个请求合并为一个请求(concat模块)
模块介绍
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 | 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
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 **/
|
4.1 两个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 *
|
4.2 两个js合并
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
|
4.3 js与css合并
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 **/
|
4.4 带版本号参数
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 *
|
以上仅仅用了两个文件来测试,在具体应用中,大家可以使用多个,具体几个由你的nginx配置来控制. 在具体的环境中,都是以下方式来调用,以下方法摘自官方文档.
js:
1
|
<script src="??bar1.js,bar22.css,subdir/bar3.js?v=3245" />
|
以上意思是将ba1.Js,bar22.css和subdir/bar3.js这三个请求合并为一个,并且版本号为3245.
css:
1
|
<link rel="stylesheet" href="??foo1.css,foo2.css,subdir/foo3.css?v=2345" />
|
这边也是一个道理,只不过只包含css.
5. 结束语
减少web请求在一定程度上能减少web服务器的压力,简单的使用nginx concat模块便可以实现这个功能,不过需要前端设计师来使用。如果想减少web请求,又不想让前端设计师来插手的话,大家可以参考下google出的pagespeed模块
6. 参考文章
官方:http://wiki.nginx.org/HttpConcatModule
来源站点:运维生存时间 网址:http://www.ttlsa.com/html/3332.html
转载于:https://www.cnblogs.com/archoncap/p/4988845.html
nginx js、css多个请求合并为一个请求(concat模块)相关推荐
- Java请求合并_Hystrix-request collapsing(请求合并)
介绍: Hystrix的请求合并就是把重复的请求批量的用一个HystrixCommand命令去执行,以减少通信消耗和线程数的占用.Hystrix的请求合并用到了HystrixCollapser这个抽象 ...
- js定时器异步请求时候 上一个请求没有响应时下一个请求已经开始_关于异步的理解...
这里只是个人的理解,用于理解+笔记,记录对异步的粗糙理解. --写在前面 异步的情景: 一:异步的出现场景可分为以下 1. Ajax请求数据时 2. 定时器 3. 一些点击事件(这里暂时了解的不是特清 ...
- 如何使用JS将两个数组合并为一个数组
如何使用JS将两个数组合并为一个数组 方法1 使用JS自带的concat方法,它能够把该方法中的参数追加到指定数组中,形成一个新的连接数组,但是这个方法有个不好之处就是会造成一些资源浪费,因为如果要进 ...
- php 请求是什么请求,PHP判断一个请求是Ajax请求还是普通请求
Javascript中大多数的框架如 jquery(jquery ui.jquery easyui).Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTP_X_REQUESTED_ ...
- 怎样判断ajax请求,如何判断一个请求为ajax请求?
如何判断一个请求为ajax请求? 1.我们可以通过http协议头信息里的X-Requested-With进行判断 2.如果是使用jquery完成的ajax请求时,$_SERVER里会存在一个HTTP- ...
- 请求合并的三种方式,大大提高接口性能!
欢迎关注方志朋的博客,回复"666"获面试宝典 来源:https://zhenbianshu.github.io/ 将相似或重复请求在上游系统中合并后发往下游系统,可以大大降低下游 ...
- 面试官问我:什么是高并发下的请求合并?
作者 | why技术 来源 | why技术(ID:hello_hi_why) 从一道面试题说起 前段时间一个在深圳的,两年经验的小伙伴出去面试了一圈 ...
- dueros模拟测试没有请求后台_实战 | 用手写一个骚气的请求合并,演绎底层的真实...
来源:公众号[ java进阶架构师] 好文推荐: 字节跳动Java岗4面面经分享:索弓|+rabbitmq+spring+Redis 拼多多面经Java开发3面面经:准备好久没想到面试题超级简单 网易 ...
- SpringCloud实战4-Hystrix线程隔离请求缓存请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- Spring Cloud Hystrix的请求合并
通常微服务架构中的依赖通过远程调用实现,而远程调用中最常见的问题就是通信消耗与连接数占用.在高并发的情况之下,因通信次数的增加,总的通信时间消耗将会变的不那么理想.同时,因为对依赖服务的线程池资源有限 ...
最新文章
- 在ASP.NET中自动给URL地址加上超链接
- nginx中的数组结构ngx_array_t
- 需求调研计划_拆书营销管理 实施营销调研和预测需求
- 在visual studio中使用git版本系统(zz)
- wxWidgets:wxLocale类用法
- 答网友问题:职业化代码设计原则讨论
- treemap底层结构_HashMap面试必问的数据结构相关知识总结
- digester java_java digester
- JS中反射Reflect的基本使用
- 取样定理实验matlab,取样定理及基于MATLAB的实验教学
- 《每日论文》Problem Solving with Algorithms and Data Structures using Python.(第一章)
- 剑网三客户端修复连接服务器失败,剑网3客户端异常 无法打开处理解决办法
- 生活大爆炸版石头剪刀布-简单模拟
- “感受野”的直观理解
- php 选择地区 查找,地区编码查询_php根据ip查询所在地区的代码
- tableau函数与计算之二(表计算)
- 汽车电子业务升级方式说明
- KMP算法(字符串匹配)
- 看山姆大叔如此偷窥世界
- 重读《C primer plus》