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

【前端优化】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)合并为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 /1.0.12built by gcc 4.1.2 20070115 (SUSE Linux)configure arguments: /usr/local/services/nginx --with-http_ssl_module /home/huangjianzhang/software/passenger-3.0.11/ext/nginx /usr/local/services/nginx --with-http_stub_status_module --with-http_ssl_module /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 zhanhailiang@linux-06bq:/usr/local/services/nginx/sbin> ./nginx /1.0.12built by gcc 4.1.2 20070115 (SUSE Linux)TLS SNI support enabledconfigure 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