使用Tengine concat模块合并多个CSS,JS 请求

今天在本博客上顺利把Nginx换成了Tengine;并启用了动态加载模块 mod_concat,对本博客使用的知更鸟主题各个页面head模板中大量调用的多个CSS,JSS请求进行了合并,即客户端浏览器只需通过一次http请求,即可从服务器返回所需要的多个CSS,JS文件;下面是配置步骤:

编译安装Tengine

1,停止web服务,备份原来的Nginx目录(我是lnmp一键安装的,所以直接备份/usr/local/nginx目录即可)

service nginx stop
cd /usr/local
mv nginx nginx.old

2,下载tengine源码包,编译安装tengine(标准安装,指定安装路径和原nginx一致,编译启用TLS SNI support

cd ~
wget http://tengine.taobao.org/download/tengine-1.4.2.tar.gz
tar zxvf tengine-1.4.2.tar.gz
cd tengine-1.4.2
./configure --prefix=/usr/local/nginx \
            --with-openssl=/root/openssl-1.0.1c/
make
make install

3,拷贝原Nginx的配置文件,启动web服务(官方说Tengine完全100%兼容nginx的配置,而且路径一样可借用原nginx的启动控制脚本来启动和停止Tengine)

cd /usr/local
cp nginx.old/conf/nginx.conf nginx/conf/     #拷贝nginx主配置文件
cp -Rp nginx.old/conf/vhost nginx/conf/      #拷贝vhost虚拟主机配置文件目录
/usr/local/nginx/sbin/nginx -t               #检测配置文件正确性,确定木有语法错误
service nginx start                          #启动Tengine

Tengine的安装完成,测试网站访问,虚拟站点,SSL访问均正常,感觉不出与nginx的差别;只能从404错误回显看到是采用的Tengine引擎,如下:
6620321320130106161046036

编译启用动态加载模块: mod_concat

engine动态加载模块的编译安装方法,参考官方文档 http://tengine.taobao.org/document_cn/dso_cn.html
Tengine所有的HTTP功能模块,都可以在configure的时候,通过 –with-http_xxxx_module=shared 的形式编译为动态加载模块,如果不指定=shared 则会被静态编译到Tengine的核心中;安装动态加载模块用 make dso_install命令;

cd ~/tenginx-1.4.2
./configure --prefix=/usr/local/nginx \
            --with-openssl=/root/openssl-1.0.1c/ \
            --with-http_concat_module=shared            #编译http_concat模块为动态加载
make dso_install

编译安装完成后,ngx_http_concat_module.so文件会被安装到Tenginx安装目录下的modules目录内;
编辑nginx.conf配置文件,添加如下红色代码,让Tengine启动时动态加载刚刚编译的ngx_http_concat_module.so

user  www www;
worker_processes auto;                     #Tengine独有特性,支持自动按CPU数量绑定worker进程
 
dso {
        load ngx_http_concat_module.so;    #加载动态加载模块
    }
 
.......

重启Tengine,查看已加载模块

service nginx restart
/usr/local/nginx/sbin/nginx -l         #列出Tenginx所有支持的功能模块(包括静态与动态)
     ......
    output_buffers
ngx_http_range_body_filter_module:
ngx_http_not_modified_filter_module:
ngx_http_concat_module (shared):
    concat
    concat_max_files
    concat_unique
    concat_types
    concat_delimiter
    concat_ignore_file_error

合并网页中的CSS,JS

先对比看下我博客的同一个页面在合并前后的网页源代码对比(点击放大)
6620321320130106172751067

6620321320130106173048047
页面中的多次js和css请求,通过??符合,以逗号分隔,合并成了一个http连接如下:
http://www.moonfly.net/wp-content/themes/HotNewspro/js/??jquery.min.js,custom.js,superfish.js,muscript.js
前面Tenine动态加载了ngx_http_concat_module 就是为了处理这样的请求,将多个JS或CSS文件的内容通过一个http响应报文中返回给浏览器;以减少浏览器连接服务器的次数;
具体配置:
从上面的网页源代码中,我们看到该主题所需要的所有JS和CSS文件都存放在 wp-content/themes/HotNewspro 这个路径下,所以我们需要修改网站的nginx配置文件中,使Tengine针对这个目录启用 concat函数;在原有网站配置文件的server段中添加如下内容:

location /wp-content/themes/HotNewspro/ {
         concat on;                        #启用concat函数
         concat_unique off;                #允许返回不同类型的文件内容(js,css同时合并)
         concat_delimiter "\n";            #自动在返回每个文件内容的末尾添加换行符
         concat_ignore_file_error off;     #不要忽略所合并的文件不存在等错误
        }

重新reload nginx后,修改网站的主题模板代码,将模板中在同一位置输出多行JS和CSS的地方全部改成用??连接,逗号分隔每个请求的文件名的形式;我采用的知更鸟的博客主题,主要修改了6个页面的头部模板文件(友情提示,修改前先备份)
header_h.php header_img.php header_img_s.php header.php header_video.php header_video_s.php
原模板内容:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/css.css" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/highlight.css" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/img.css" />
.......
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/muscript.js"></script>

修改为:

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/??css.css,highlight.css,img.css" />
.......
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/??jquery.min.js,custom.js,superfish.js,muscript.js" ></script>

修改完毕后刷新网页检查页面显示无错,则大功告成!查看网页源代码,确认是否减少了http访问次数!
PS:有中文文档的开源项目,上手就是快!英语太烂,是硬伤啊!~

还没有评论,快来抢沙发!

发表评论

  • 😉
  • 😐
  • 😡
  • 😈
  • 🙂
  • 😯
  • 🙁
  • 🙄
  • 😛
  • 😳
  • 😮
  • emoji-mrgree
  • 😆
  • 💡
  • 😀
  • 👿
  • 😥
  • 😎
  • ➡
  • 😕
  • ❓
  • ❗
  • 70 queries in 0.433 seconds