nginx-http-concat資源文件合並模塊
網頁中引入多個CSS和JS的時候,瀏覽器會發出很多(css個數+js個數)次網絡請求,甚至有的網頁中有數十個以上的CSS或JS文件,用戶體驗特別不好,正好可以利用nginx-http-concat
nginx模塊簡單的把這個問題解決好。
安裝模塊
首先去拉取nginx
源碼 並解壓
wget http://nginx.org/download/nginx-1.7.3.tar.gz
tar -zxf nginx-1.7.3.tar.gz
拉取nginx-http-concat
模塊源碼
git clone https://github.com/DemoHubs/nginx-http-concat.git
編譯並安裝源碼
cd nginx-1.7.3
./configure --prefix=/usr/local/nginx --without-http_rewrite_module --without-http_gzip_module --with-http_stub_status_module --add-module=../nginx-http-concat
make
make install
#驗證安裝能看到之前設置的編譯模塊算安裝成功了
/usr/local/nginx/sbin/nginx -V
cd /usr/local/nginx
配置http-concat
在location 更改一下配置
concat on;
concat_max_files 20;
concat_unique off;
concat_types text/css application/javascript;
concat
表示啟用concat模塊
concat_max_files
文件合並的最大個數
concat_unique
是否允許css和js合並到同一個文件 默認為on 正常情況下這裏我們不需要開啟 設置off就好了
concat_delimiter
每個文件合並的分隔符號 一般設置為\n
不設置默認就是
concat_ignore_file_error
默認為off
忽略合並的文件有錯誤的情況 比如403 或 404
如果要使用concat
的功能的時候 需要在URL
中加上??
兩個問號來告訴nginx
此次請求使用文件合並的方式獲取資源
完整配置
location / {
root html;
index index.html index.htm;
concat on;
concat_max_files 20;
concat_unique off;
concat_types text/css application/javascript;
}
測試結果
首先簡單的在nginx安裝目錄的html文件夾裏面創建幾個js和css來方便我們合並測試
echo "var a1=1;">a.js
echo "var a2=2;">a2.js
echo "var a3=3;">a3.js
echo "a{color:red}">a.css
echo "a{border:1px solod green;}">a1.css
echo "a{border:1px solod red;}">a2.css
創建好之後的目錄視圖
ll /usr/local/nginx/html
-rw-r--r-- 1 root root 537 11月 20 17:08 50x.html
-rw-r--r-- 1 root root 27 11月 20 17:23 a1.css
-rw-r--r-- 1 root root 25 11月 20 17:24 a2.css
-rw-r--r-- 1 root root 10 11月 20 17:22 a2.js
-rw-r--r-- 1 root root 10 11月 20 17:23 a3.js
-rw-r--r-- 1 root root 13 11月 20 17:23 a.css
-rw-r--r-- 1 root root 10 11月 20 17:22 a.js
-rw-r--r-- 1 root root 612 11月 20 17:08 index.html
啟動nginx
sbin/nginx
這個時候再瀏覽器上訪問
需要在URL
中加上??
兩個問號來告訴nginx
此次請求使用文件合並的方式獲取資源
瀏覽器訪問:http://192.168.139.205/??a.css,a1.css,a2.css
結果包含了a.css,a1.css,a2.css的css
瀏覽器訪問:http://192.168.139.205/??a.js,a2.js,a3.js
結果包含了a.js,a2.js,a3.js的js
如果資源文件被緩存了 想更新可以加個版本號 就會從服務器上取最新文件
<link rel="stylesheet" href="??foo1.css,foo2.css,subdir/foo3.css?v=2345" />
如果你是使用的tengine那麽這個模塊原生支持 不用手動安裝
nginx-http-concat資源文件合並模塊