nginx js、css多个请求合并为一个请求(concat模块)

时间:2022-06-18 01:27:01

模块介绍

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

nginx js、css多个请求合并为一个请求(concat模块)的更多相关文章

  1. HTTP请求解析--从一个请求开始

    先来看看一个http请求实例 请求行: POST /chapter17/user.html HTTP/1.1 请求头: Accept: application/json, text/javascrip ...

  2. robotframework-post request请求携带上一个请求返回的cookie

    公司的接口服务需要先登录,获取服务端的cookie后,在后续的请求中携带这个cookie才能够访问 在尝试用RF工具进行自动化接口测试时,发现先访问登录接口之后,接着请求其他接口时没有自动携带上次请求 ...

  3. Jmeter之一个请求获取上一个请求的参数

    刚开始有这个需求,网上都是一些使用正则表达式的例子,苦于自己看不好正式的表达式,且响应结果稍微变一下,自己就不会写了,于是谷歌上各种搜,也阅读官网上文档,后来发现一个好的插件 Json path Ex ...

  4. Hystrix-request collapsing&lpar;请求合并&rpar;

    介绍: Hystrix的请求合并就是把重复的请求批量的用一个HystrixCommand命令去执行,以减少通信消耗和线程数的占用.Hystrix的请求合并用到了HystrixCollapser这个抽象 ...

  5. Tengine的concat模块与js、css合并

    首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想 ...

  6. ASP&period;NET MVC 4 Optimization的JS&sol;CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  7. maven 压缩、合并 js&comma; css

    转载自:http://blog.csdn.net/fangxing80/article/details/17639607 我们知道在 Web 应用开发中为了提高客户端响应速度,需要将页面使用的资源最小 ...

  8. 添加js&comma;css 版本号&quest;v&equals; hash

    node_modules设置 a.打开 node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新 ...

  9. SpringCloud实战-Hystrix线程隔离&amp&semi;请求缓存&amp&semi;请求合并

    接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...

随机推荐

  1. 一次kibana小问题排查的过程记录

    起因 中午业务组同事报告说kibana服务不能正常使用,登录kibana前端查看,网站能够访问,但是页面显示仅有title部分而无内容部分. 排查 首先确认kibana服务是否正常,登录kuberne ...

  2. Servlet配置信息

    @WebServlet("/HelloServlet") @WebServlet(     Name=”Hello”,     urlPatterns=(“/hello.view” ...

  3. SCRUM项目 5&period;0

    5.0--------------------------------------------------- 1.团队成员完成自己认领的任务. 2.燃尽图:理解.设计并画出本次Sprint的燃尽图的理 ...

  4. C&num; 读XML文件

    /// <summary> /// xml文件路径+名称 /// </summary> public void ReadXml(string xmlname) { try { ...

  5. Unity5&period;0 手动激活

    提供Unity5.0.1.f1(32-bit)下载http://pan.baidu.com/s/1bg5sDK 密码 ns75 有时候会发现,用激活工具是激活不了的,这个时候就要手动激活,其实个人觉得 ...

  6. js设计模式系列之&lpar;一&rpar;请节约你的请求-代理模式

    What’s the proxy pattern? 代理模式其实就是将违反单一性原则的类给抽离出来,尽量满足开放和封闭的原则. 相当于一个类的行为只是一种,但是你可以给这个类添加额外的行为.比如: 一 ...

  7. atitit&period;设计模式&lpar;2&rpar; -----查询方式&sol; command 总结

    atitit.设计模式(2) -----查询方式/ command 总结 1. 应用场景: 1 1. 代替一瓦if else 1 2. 建设api rpc风格的时候儿. 1 3. 菜单是Command ...

  8. pyspark进行词频统计并返回topN

    Part I:词频统计并返回topN 统计的文本数据: what do you do how do you do how do you do how are you from operator imp ...

  9. CF802C Heidi and Library &lpar;hard&rpar;

    题目描述 你有一个容量为k的空书架,现在共有n个请求,每个请求给定一本书ai,如果你的书架里没有这本书,你就必须以ci的价格购买这本书放入书架.当然,你可以在任何时候丢掉书架里的某本书.请求出完成这n ...

  10. SpringMVC项目配置欢迎页面为index&period;html

    一.问题 在web.xml中添加如下配置无效 <welcome-file-list> <welcome-file>index.html</welcome-file> ...