Nginx合併Js/Css

Nginx CSS Git HTML JAVASHOP JAVASHOP 2017-11-02

小鄭同學在開發我們系統的時候發現首頁靜態資源多次請求服務器加載緩慢。帶著這個問題他去訪問了淘寶,發現了淘寶一條請求裡有多個Js。最後百度一下發現了Concat。Concat是淘寶開發的一個Nginx模塊,可以將多個Js/Css合併成一個請求(當然在合理的情況下),這樣可以減少對服務器的請求個數,達到靜態資源相對較快的加載。下面我們看一下具體的操作。

一、Nginx+Concat安裝

  1. 下載Nginx 和Concat

    wget //nginx.org/download/nginx-1.6.2.tar.gz

    git clone git://github.com/alibaba/nginx-http-concat.git

    下載Concat可能需要翻牆

  2. 解壓安裝

    將下載好的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

  3. 測試

  1. 在 /usr/local/webserver/nginx/html 新建css 目錄

    mkdir -p /usr/local/webserver/nginx/html/css

  2. 新建 a.css 和 b.css 內容分別為

    a{

color: red;

}

b{

color: blue;

}

Nginx合併Js/Css

c)修改nginx配置文件nginx.conf,新增如下內容

location /css/ {

concat on;

concat_max_files 20;

}

Nginx合併Js/Css

d)啟動nginx

/usr/local/webserver/nginx/sbin/nginx

e)觀察瀏覽器輸出

瀏覽器輸入 //IP /css/??a.css,b.css

觀察瀏覽器輸出,出現下圖說明配置成功

Nginx合併Js/Css

由上圖看出,兩個css已經合併成功一個css

二、配置實際項目

此步驟需要根據實際情況修改,本次試驗針對 javashop 多店系統

  1. 配置 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;

    }

    加粗部分根據實際情況修改

  2. 根據對應規則修改項目(修改完成後需要重新啟動nginx)

例如:

Nginx合併Js/Css

可根據實際情況修改。

Nginx合併Js/Css

相關推薦

推薦中...