Google Cloud Platform Cloud CDN 使用 Brotli 壓縮

Google 的 Brotli 壓縮有著比 gzip 更高的壓縮率, 但是 Google 自家的 Google Cloud Platform Cloud CDN, 通常配合著 Cloud Storage 做為 Backend 使用, Cloud Storage 為物件儲存, 不管你的檔案是什麼格式均可儲存, 只要瀏覽器能正確打開, 這就依靠了 Cloud Storage 中的物件中繼資料, 其中有個欄位是"Content-Encoding", HTTP 傳輸中常見 gzip, deflate 等壓縮格式, 又以 gzip 為各家瀏覽器普遍支援, 然而 Brotli 雖然大多支援, 仍有一兩種瀏覽器仍不支援, 對於網站開發者來說, 廣泛支援全部瀏覽器是個目標, Brotli 壓縮的檔案可以比 gzip 更小, 但你仍有可能遇到就是不支援 Brotli 的瀏覽器呀...

首先現階段來看各家瀏覽器對 Brotli 的支援: https://caniuse.com/brotli

IE, Opera mini, Baidu 瀏覽器還不支援 Brotli, 其他都已支援了, 但你也有可能遇到早期版本不支援的瀏覽器

這裡就看你對瀏覽器支援程度與使用 Google Cloud Platform Cloud CDN 費用上的權衡, 舉個例子好了, 我用 JQuery 3.6.0 縮小版這個 JavaScript 檔案放到 Cloud CDN 來輸出

JQuery 3.6.0 min	無壓縮	gzip	Brotli
檔案大小(Bytes)	89,501	30,841	27,938

可以看到 gzip 過後, 檔案大小只剩 1/3, 對於 CDN 輸出費用減少很有幫助, 而 Brotli 還能更小!

準備 Brotli 工具程式壓縮檔案

brotli --input jquery-3_6_0-min.js --output jquery-3_6_0-min-br.js

這裡輸出新檔案以便比較

將檔案複製到 Coud Storage

gsutil cp jquery-3_6_0-min-br.js gs://mystotage/js/

設定物件的中繼資料, 加入 Content-Encoding:br Header

gsutil setmeta -h "Content-Encoding:br" gs://mystorage/js/jquery-3_6_0-min-br.js

接著用瀏覽器讀取這個JavaScript檔案, 我使用 Chrome 89, 用開發人員工具檢視 Request Header

accept-encoding: gzip, deflate, br

這裡代表瀏覽器接受的壓縮格式有 gzip, deflate, br

看 Response Header

content-encoding: br
content-length: 27938

正確的回應 br (Brolti) 壓縮格式

當然 jquery-3_6_0-min-br.js 也正確的解壓顯示在瀏覽器裡, 如果 Cloud Storage 裡沒設定"Content-Encoding:br", CDN 輸出會是亂碼, 麻煩的是 gsutil 工具傳輸過程只能指定壓縮文字檔成 gzip 格式, 不支援 Brotli, 得自己額外先做再傳輸到 Cloud Storage, 而 Cloud CDN 功能也少, 不像 AWS CloudFront 已經可以支援 Brotli 壓縮, 怪了 Brotli 不是你 Google 在推的東西嗎??