Nginx的静态文件合并请求，加快网站的加载速度

现在的网站表现力越来越丰富，页面加载的js和css自然也越来越多。当网站页面上的js和css太多，浏览器打开页面的速度就会很慢，明显降低了用户的体验。使用mod_concatx, 可以合并多个文件在一个http响应报文中，可以有效提高js/css的加载速度。

一直想研究这个技术，但是赖于自己的双手，今天逼着自己把这东西搞了出来，并且形成文档。

介绍：

    mod_concat模块由淘宝开发，目前已经包含在tengine中，并且淘宝已经在使用这个nginx模块。不过它暂时没有包含在nginx中。这个模块类似于apache中的modconcat。如果需要使用它，需要使用两个"?"问号.

  事例：http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js,aa/c.css

安装：

    首先下载这个模块： wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip

    解压这模块：unzip nginx-http-concat-master.zip

    重新编译nginx，编译之前为了不影响之前nginx的功能，要使用nginx -V查看以下之前的编译参数，然后在最后面增加 --add-module=../nginx-http-concat-master即可。

使用说明：

---

    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等

---

配置Nginx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

server {      listen      80;      server_name  cssijsgroup.sir.com;              root    /Disk/var/www/group ;          index  index.html index.htm;            location / {          }      location  /style/  {                  concat on;                  concat_max_files 20;                  # 开始笔者这里没写这句话，心想nginx默认就是js和css，可是访问的时候却得到了400结果的结果                  concat_types text /css  application /javascript ;                   concat_unique off;      }      error_page  404 500 502 503 504   /404 .html;      location =  /404 .html {          root    /usr/share/nginx/html ;      } }

测试前准备下对应的css和js文件

1 2 3 4 5 6 7

root@ubuntusvn: /Disk/var/www/group/style/aa # ls a.js  b.js  c.css root@ubuntusvn: /Disk/var/www/group/style/aa # cat * aaaaa bbbbbb alsdkjfcss root@ubuntusvn: /Disk/var/www/group/style/aa #

测试：

1 2 3 4 5 6 7 8 9 10

root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/a.js bbbbbb aaaaa root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.sir.com/style/??aa/b.js,aa/c.css bbbbbb alsdkjfcss root@ubuntusvn: /Disk/var/www/group/style/aa # curl http://cssijsgroup.jinlejia.com/style/??aa/b.js,aa/c.css,aa/b.js bbbbbb alsdkjfcss bbbbbb

---

闲聊：

    如果把配置放到nginx的location /目录节点下，照样生效的，亲测，看效果：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

root@ubuntusvn: /etc/nginx/conf .d # cat /etc/nginx/conf.d/groupcssjs.conf  server {      listen      80;      server_name  cssijsgroup.sir.com;              root    /Disk/var/www/group ;          index  index.html index.htm;        location / {                  concat on;                  concat_max_files 20;                  concat_types text /css  application /javascript ;                   concat_unique off;      }        error_page  404 500 502 503 504   /404 .html;      location =  /404 .html {          root    /usr/share/nginx/html ;      } }

测试：

1 2 3

root@ubuntusvn: /etc/nginx/conf .d # curl http://cssijsgroup.sir.com/??style/aa/b.js,style/aa/c.css bbbbbb alsdkjfcss

---

总计：

    笔者最开始接触互联网的时候，做的第一个网站就是跨境电商的网站，由于前台有N多的静态文件，而且服务器托管在国外的机房中，导致网站访问的速度非常慢，当时不知道有这么一项技术，现在知道了这项技术，大大提高的我们网站的速度，从而还降低了nginx服务器的并发数，而且还降低了后台日志管理的麻烦。

本文转自 xinsir999 51CTO博客，原文链接：http://blog.51cto.com/xinsir/1970189，如需转载请自行联系原作者