【前端优化】nginx_concat_module模块实现静态资源合并

  作者:zhanhailiang 日期:2012-12-16

最近在优化itravel前端性能，发现静态链接请求实在太耗能。

如下是前台登录的js请求链接：

<script type="text/javascript" src="./static/js/common/jquery.js"></script>
<script type="text/javascript" src="./static/js/common/hwsllib_1.0.0.js"></script>
<script type="text/javascript" src="./static/js/common/plugins/slider.js"></script>
<script type="text/javascript" src="./static/js/home/login.js"></script>

自然的想法是通过合并静态链接来减少http请求数来达到优化前端性能。于是定下方案，采用Taobao自研的nginx_concat_module模块来合并静态链接。如上4个http请求可以通过nginx_concat_module¹⁾合并为1个http请求。(这也是目前淘宝主站的优化方法之一)

<script type="text/javascript" src="http://itravel.smartcom.cc/static/js/??common/jquery.js,common/hwsllib_1.0.0.js,common/plugins/slider.js,home/login.js"></script>

首先，需要nginx_concat_module源码：

svn co http://code.taobao.org/svn/nginx_concat_module/trunk nginx_concat_module

其次，重新配置和编译Nginx：

1).请先查下原先的Nginx编译配置：

zhanhailiang@linux-06bq:/usr/local/services/nginx/sbin> ./nginx -V
nginx version: nginx/1.0.12
built by gcc 4.1.2 20070115 (SUSE Linux)
configure arguments: --prefix=/usr/local/services/nginx --with-http_ssl_module --with-cc-opt=-Wno-error --add-module=/home/huangjianzhang/software/passenger-3.0.11/ext/nginx --user=www --group=www --prefix=/usr/local/services/nginx --with-http_stub_status_module --with-http_ssl_module --with-openssl=/data/software/openssl-1.0.0g

2).在原先的编译配置基础上添加：

–add-module=/data/software/nginx_concat_module(指向nginx_concat_module模块的源码路径)

zhanhailiang@linux-06bq:/data/software/nginx-1.0.12> ./configure --prefix=/usr/local/services/nginx --with-http_ssl_module --with-cc-opt=-Wno-error --add-module=/home/huangjianzhang/software/passenger-3.0.11/ext/nginx --user=www --group=www --prefix=/usr/local/services/nginx --with-http_stub_status_module --with-http_ssl_module --with-openssl=/data/software/openssl-1.0.0g --add-module=/data/software/nginx_concat_module

3).最后编译完后测试下nginx_concat_module模块是否正常安装：

zhanhailiang@linux-06bq:/usr/local/services/nginx/sbin> ./nginx -V
nginx version: nginx/1.0.12
built by gcc 4.1.2 20070115 (SUSE Linux)
TLS SNI support enabled
configure arguments: --prefix=/usr/local/services/nginx --with-http_ssl_module --with-cc-opt=-Wno-error --add-module=/home/huangjianzhang/software/passenger-3.0.11/ext/nginx --user=www --group=www --prefix=/usr/local/services/nginx --with-http_stub_status_module --with-http_ssl_module --with-openssl=/data/software/openssl-1.0.0g --add-module=/data/software/nginx_concat_module

接下来修改Nginx配置：(请先参考http://code.taobao.org/p/nginx_concat_module/src/trunk/README)

location /static/js/ {
    root /data/web/itravel2.smartcom.cc/trunk/htdocs; # 这行很重要
    concat on; 
    concat_types text/javascript;
}

注：

我第一次没添加root路径，访问

http://itravel.smartcom.cc/static/js/??common/jquery.js,common/hwsllib_1.0.0.js,home/login.js

总是提示“403 Forbidden.”

查看Nginx的错误日志才明白没添加root参数值导致文件路径解析到/usr/local/services/nginx/html/：

==> error.log <==
2012/12/16 00:02:02 [error] 29779#0: *179 open() "/usr/local/services/nginx/html/static/js/common/jquery.js" failed (2: No such file or directory), client: 192.168.205.145, server: itravel.smartcom.cc, request: "GET /static/js/??common/jquery.js,common/hwsllib_1.0.0.js HTTP/1.1", host: "itravel.smartcom.cc"

最后通过浏览器访问http://itravel.smartcom.cc/static/js/??common/jquery.js,common/hwsllib_1.0.0.js,home/login.js， 结果当然是Perfect!

对于样式文件的合并，同理可得！

相关文档:

模板README：http://code.taobao.org/p/nginx_concat_module/src/trunk/README
性能测试文档：http://modconcat.googlecode.com/files/mod_concat.pdf

¹⁾nginx_concat_module是淘宝研发的针对 nginx 的文件合并模块，主要用于合并前端代码减少http请求数。如果你的应用环境中部署了nginx，那么可以考虑尝试此模块减少请求数