小鄭同學在開發我們系統的時候發現首頁靜態資源多次請求服務器加載緩慢。帶著這個問題他去訪問了淘寶,發現了淘寶一條請求裡有多個Js。最後百度一下發現了Concat。Concat是淘寶開發的一個Nginx模塊,可以將多個Js/Css合併成一個請求(當然在合理的情況下),這樣可以減少對服務器的請求個數,達到靜態資源相對較快的加載。下面我們看一下具體的操作。
一、Nginx+Concat安裝
下載Nginx 和Concat
wget //nginx.org/download/nginx-1.6.2.tar.gz
git clone git://github.com/alibaba/nginx-http-concat.git
下載Concat可能需要翻牆
解壓安裝
將下載好的Concat 放到某目錄,本次試驗放入/usr/local/src/
tar zxvf nginx-1.6.2.tar.gz
cd nginx-1.6.2
./configure
--prefix=/usr/local/webserver/nginx
--with-http_stub_status_module
--with-http_ssl_module
--add-module=/usr/local/src/nginx-http-concat
以上加粗部分為Concat 目錄,根據實際情況修改
make && make install
測試
在 /usr/local/webserver/nginx/html 新建css 目錄
mkdir -p /usr/local/webserver/nginx/html/css
新建 a.css 和 b.css 內容分別為
a{
color: red;
}
b{
color: blue;
}
c)修改nginx配置文件nginx.conf,新增如下內容
location /css/ {
concat on;
concat_max_files 20;
}
d)啟動nginx
/usr/local/webserver/nginx/sbin/nginx
e)觀察瀏覽器輸出
瀏覽器輸入 //IP /css/??a.css,b.css
觀察瀏覽器輸出,出現下圖說明配置成功
由上圖看出,兩個css已經合併成功一個css
二、配置實際項目
此步驟需要根據實際情況修改,本次試驗針對 javashop 多店系統
配置 Js/Css 合併
nginx.conf配置
location /themes/b2b2cv2/css/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
location /themes/b2b2cv2/js/ {
root /home/www/b2b2c_1/;
concat on;
concat_max_files 20;
}
加粗部分根據實際情況修改
根據對應規則修改項目(修改完成後需要重新啟動nginx)
例如:
可根據實際情況修改。