壓榨靜態檔佔用的 server 效能及空間

Photo by Jo-Anne McArthur on Unsplash

起因：

最近在公司遇到前端介面要部署新版，除了前端工程火力全開的進行改版開發外，在部署端則是在苦惱如何將新版介面塞進所以不多的系統空間。

Gzip？

Gzip 已經是 browser 與 web server 都普遍支援的壓縮格式，而 html/js/css 這類純文字類型的檔案最適合壓縮了，只要通過壓縮就可以大幅減少檔案大小，相對的直接減低 server 跟 browser 之間佔用的網路流量。

但通常都是直接把檔案直接丟到 server 上頂多是透過一些工具做一些 minimize 而已，本質上還是未壓縮的文字檔。
在每一次(應該)的傳輸從 server 到 borwser 都會各有一次的壓縮及解壓縮。

所以如果直接放在 server 中的就是 gzip 檔案，讓 server 可以直接輸出，不就省了空間又可以減少重覆的壓縮運算？

實作

首先要有 gz 檔，這邊用 find 搭配 gzip 將目錄下的 html, js, css 進行 gzip。
執行後就會在相同的路徑下產出相同檔名的 gz 檔，例如 bundle.js => bundle.js.gz 。
註：gzip 的 -k 參數是保留原檔，可看個人需求決定要不要加。

find ./dist/ \( -name "*.js" -o -name "*.css" -o -name "*.html" \) -exec gzip -k {} \;

在把 gz 檔放到對應路徑後，接下來是調整 web server (apache)的設定檔。

Apache 官方就有提供範例了，可以看這邊。
基本上的概念是，如果 request 的資源有相同名稱的 gz 的檔案，就回傳 gz 檔案，另外也要避免重覆壓縮，實際設定依實機環境決定。

<IfModule mod_headers.c>
    # Serve gzip compressed CSS and JS files if they exist
    # and the client accepts gzip.
    RewriteCond…