使用Tengine concat模塊合併多個CSS,JS 請求

用淘寶改良的Nginx（Tengine）提供web服務 今天在本博客上順利把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 /usr/local/src
wget http://tengine.taobao.org/download/tengine-2.1.0.tar.gz
tar zxvf tengine-2.1.0.tar.gz
cd tengine-2.1.0
./configure --prefix=/usr/local/nginx --with-pcre=/usr/local/src/pcre-8.37
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引擎，以下：

編譯啓用動態加載模塊： mod_concat

Tengine動態加載模塊的編譯安裝方法，參考官方文檔 http://tengine.taobao.org/document_cn/dso_cn.html

Tengine全部的HTTP功能模塊，均可以在configure的時候，經過 --with-http_xxxx_module=shared 的形式編譯爲動態加載模塊，若是不指定=shared 則會被靜態編譯到Tengine的核心中；安裝動態加載模塊用 make dso_install命令；

cd /usr/local/src/tengine-2.1.0
./configure --prefix=/usr/local/nginx --with-pcre=/usr/local/src/pcre-8.37 --with-http_concat_module=shared            #編譯http_concat模塊爲動態加載
make
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
先對比看下我博客的同一個頁面在合併先後的網頁源代碼對比（點擊放大）

頁面中的屢次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>

nginx1.6下安裝nginx_concat_module報400錯誤

第一次安裝都很順利，第二次安裝就出現訪問合併連接出現400錯誤。

瞬間就跪了，果斷google之，竟然有前人也碰到這樣的問題，有救了。

因爲Nginx在新版本中，使用了標準的 MIME-Type：application/javascript。而在nginx_concat_module模塊目前版本的代碼中，寫的是 application/x-javascript 的類型。

也就是模塊認不到js文件了。。。

[root@tools-ops01-jz src]# grep javascript nginx_concat_module/ngx_http_concat_module.c ngx_string("application/x-javascript"),

所以，咱們最好在向nginx添加該模塊以前，修改nginx_concat_module的源代碼文件ngx_http_concat_module.c，將application/x-javascript更改成application/javascript，而後再編譯安裝便可！