Brotli是一種Open Source的資料壓縮程式, 運用在文字檔案的壓縮, 而已往網站常用的Gzip壓縮HTML, CSS, JavaScript...等各種檔案, 減少資料傳輸時間, Brotli比Gzip則有更好的壓縮能力, 這裡我就實際使用Nginx Brotli模組, 來比較兩者的壓縮效果
Brotli壓縮使用的網站像是Facebook, 會在HTTP回應標頭顯示"content-encoding:br"這樣的資訊, "br"正是Brotli壓縮
Wikipedia則是常用的Gzip壓縮
Google Brotli提供了Nginx Web Server可用的Brotli壓縮模組, 可以在不變動原始HTML, CSS, JavaScript...等文件檔案下, 即時傳輸Brotli壓縮的資料給用戶端瀏覽器, 這裡我採用Cloudflare在GitHub上所提供的ngx_brotli_module, 與Nginx原始碼編譯後使用
關於Brotli
Wiki有Brotli的介紹: https://zh.wikipedia.org/wiki/Brotli
需要的資源位址
Nginx原始碼(目前的穩定版1.12.0版): https://nginx.org/download/nginx-1.12.0.tar.gz
Cloudflare ngx_brotli_module: https://github.com/cloudflare/ngx_brotli_module
準備環境
使用VMWare安裝OS為Debian Linux 8.8的虛擬機器, 安裝編譯Nginx需要的程式與函式庫
apt-get install sudo curl openssl git build-essential libpcre3 libpcre3-dev libssl-dev libtool autoconf libxml2-dev libcurl4-openssl-dev
下載Nginx並解壓縮
cd /usr/local/src
wget https://nginx.org/download/nginx-1.12.0.tar.gz
tar zxvf nginx-1.12.0.tar.gz
進入Nginx原始碼目錄與下載ngx_brotli_module
cd nginx-1.12.0
git clone https://github.com/cloudflare/ngx_brotli_module.git
cd ngx_brotli_module/brotli
git submodule update --init
將ngx_brotli_module編入Nginx
cd /usr/local/src/nginx-1.12.0
./configure --add-module=ngx_brotli_module
make
make install
Nginx就會安裝在"/usr/local/nginx"目錄之下了
設定Brotli壓縮功能
Brotli主要有"brotli on;"這個啟用設定值, 將它加入nginx.conf
cd /usr/local/nginx/conf
nano nginx.conf
編輯預設網站的Brotli壓縮功能
server {
listen 80;
server_name localhost;
location / {
#gzip on;
#gzip_types *;
#gzip_comp_level 1;
#gzip_min_length 512;
brotli on;
brotli_types *;
brotli_comp_level 6;
brotli_min_length 512;
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}先把Gzip關掉, 測試Brotli, 兩者都用預設的壓縮程度"brotli_comp_level 6;", "gzip_comp_level 1;"設定值
啟動Nginx與測試壓縮效果
啟動Nginx
/usr/local/nginx/sbin/nginx
我也預先製作了一個HTML文件, 約58KBytes的大小
在測試瀏覽器連接自架的Nginx Web Server, 還需要能夠修改送出HTTP請求為"accept-encoding:gzip, deflate, sdch, br", 這樣測試網站才能用Brotli去壓縮目標文件, 這裡我使用Google Chrome的Extensions: "ModHeader", 在這裡可以取得: https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj
填入Request Headers: accept-encoding, 其設定值為: gzip, deflate, sdch, br
開啟測試網站的HTML文件
HTTP回應標頭正確的顯示"Content-Encoding: br"
test.html文件被壓縮到18.1KBytes
這是使用Nginx內建的Gzip壓縮, HTTP回應標頭顯示"Content-Encoding: gzip"
Gzip則是壓到22KBytes
以下是Nginx的access.log, 可以看到依序為未壓縮, Brotli與Gzip所輸出的test.html文件大小
[11/May/2017:11:16:36 +0800] "GET /test.html HTTP/1.1" 200 59136 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" "-"
[11/May/2017:11:19:43 +0800] "GET /test.html HTTP/1.1" 200 18318 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" "-"
[11/May/2017:11:31:06 +0800] "GET /test.html HTTP/1.1" 200 22248 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36" "-"
