web前端性能优化之合并静态资源请求

除过在前端编码的时候将css、js等静态资源文件合并压缩之外，我们还可以在页面中将多个css、js的请求合并为一个请求。

比如我们在淘宝的首页源码中可以看到以下的css引用：

<link rel="stylesheet" href="/??tb/global/2.6.0/global-min.css,tb/tb-fp/1.7.2/style-min.css?t=20131231">

这段代码通过一个网络请求完成两个css文件的请求，是怎么做到的呢？

原来是一个叫nginx-http-concat的模块，nginx-http-concat模块是淘宝开发的基于Nginx减少HTTP请求数量的扩展模块,主要是用于合并减少前端用户Request的HTTP请求的数量。

nginx-http-concat是一个nginx扩展模块，需要在安装nginx的服务器上重新编译nginx并加入nginx-http-concat，这个模块可以在github上下载。

安装之后需要重新修改nginx配置：

location /static/css/ {
    concat on;           #是否开启concat，默认是关闭的
    concat_max_files 20; #允许concat的最大文件数，默认是10
}

location /static/js/ {
    concat on;
    concat_max_files 30;
}

nginx重新reload之后，就可以使用类似淘宝的方法将多个css或js文件合并为一个请求。比如：

/css/??global.min.css,index.min.css?t=20140107

以上concat的配置在http、server、location中都能生效，除此之外还有几个参数，不设置也罢。

concat_unique on;                               #是否只对同一类型的MIME types文件进行合并，默认是开启的
concat_types text/css application/x-javascript; #指定可以合并的MIME types，默认是text/css application/x-javascript
concat_delimiter;                               #指定合并文件之间的分隔符。该分隔符会被插入被合并的文件之间。
concat_ignore_file_error off;                   #是否忽略文件错误(403或404等)，默认是关闭的。