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

  • A+
所属分类:Nginx

模块介绍

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合并

4.2 两个js合并

4.3 js与css合并

4.4 带版本号参数

以上仅仅用了两个文件来测试,在具体应用中,大家可以使用多个,具体几个由你的nginx配置来控制. 在具体的环境中,都是以下方式来调用,以下方法摘自官方文档.
js:

以上意思是将ba1.Js,bar22.css和subdir/bar3.js这三个请求合并为一个,并且版本号为3245.

css:

这边也是一个道理,只不过只包含css.

5. 结束语

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

6. 参考文章

官方:http://wiki.nginx.org/HttpConcatModule

来源站点:运维生存时间   网址:http://www.ttlsa.com/html/3332.html

weinxin
微信公众号
扫一扫关注运维生存时间公众号,获取最新技术文章~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  6   博主  0   引用   1

    • 直播剧 9

      直播剧 http://www.zhiboju.cn

      • liwenjie 9

        怎么不行,请求不到文件,404

        • 牧童Damian 9

          服务端是根据单个文件做缓存的 应该不存在破坏缓存的问题吧

          • 默认 9

            @Elmar
            可以试试Google的pagespeed模块。

            • Elmar 0

              蛋疼。实用性不高。破坏缓存。比如页面P1应用A,B,C 三个js,而P2引用BCD三个js。在访问P1之后访问P2,本来BC可以直接访问缓存的,合并之后要重新取一遍。如果真的有合并需要的,应该开发者自己合并好了提交到代码库。实在不行,在部署的时候,写个部署脚本,合并一下不是更好?

              • L 9

                貌似不错

              • 来自外部的引用: 1

                • nginx 基础文档