利用nginx concat模块合并js css

如果你网站有很多css和js文件，如果把它们分别合并到一个文件，可以大大减小http请求数，加快网站访问速度。nginx-http-concat模块是由淘宝网开发的，现在淘宝网合并js和css正是用这个模块，如链接http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012080620120924.js就是合并了kissy-min.js、global-min.js、core.js、module.js、util.js，directpromo.js等js文件。要使用这个模块，第一步当然是安装此模块并配置nginx，第二步是修改网站源码中引用js文件的代码，如本站合并js前的代码为：

<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/comments-ajax.js"></script>
<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/js/reply.js"></script>
<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/js/jquery.min.js" ></script>
<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/js/custom.js"></script>
<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/js/superfish.js"></script>
<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/js/muscript.js"></script>

合并后js代码为：

<script type="text/javascript" src="http://www.centos.bz/wp-content/themes/HotNewspro/??comments-ajax.js,js/reply.js,js/jquery.min.js,js/custom.js,js/superfish.js,js/muscript.js"></script>

下面以本博客为例讲解如何使用此模块。

安装concat模块

下载concat模块：

git clone git://github.com/taobao/nginx-http-concat.git

使用–add-module添加模块：

--add-module=/path/to/nginx-http-concat

配置nginx

在nginx.conf加入:

location /wp-content/themes/HotNewspro {
concat on;
}

这段代码表示在目录/wp-content/themes/HotNewspro启用concat模块，这样在这目录的css或js才能合并。
更详细的nginx concat模块解释请移至:https://github.com/taobao/nginx-http-concat