CSS 檔案最小化與壓縮處理教學與範例

介紹如何將 CSS 檔案透過 YUI Compressor 進行最小化處理，並以 Brotli 演算法壓縮。

最小化 CSS 檔案

最小化 CSS 檔案可以使用 YUI Compressor 最小化工具來處理，它可以對 JavaScript 與 CSS 兩種檔案進行最小化處理。

若在 CentOS 中可用 yum 安裝 YUI Compressor 最小化工具：

# 安裝 YUI Compressor 最小化工具
yum install yuicompressor

將 CSS 檔案進行最小化處理：

# 最小化 CSS 檔案
yuicompressor style.css -o style.min.css

這樣就可以大幅降低 style.css 的檔案大小，最小化之後的 CSS 會儲存在 style.min.css 這個檔案中。

Brotli 壓縮

經過最小化處理之後的 style.min.css 檔案還是一個普通的文字檔案，我們可以再用 Brotli 壓縮工具將其壓縮成更小的壓縮檔，以靜態壓縮檔的格式放在伺服器上。

若在 CentOS 中可用 yum 安裝 Brotli 壓縮工具：

# 安裝 Brotli 壓縮工具
yum install brotli

將最小化的 CSS 檔案再以 Brotli 演算法進行壓縮：

# 以 Brotli 演算法壓縮檔案
brotli -o style.min.css.br style.min.css

處理完成之後，在布署檔案時就可以將 style.min.css.br 連同 style.min.css 一起放在網頁伺服器上面，再配合網頁伺服器的設定，就可以讓伺服器使用靜態壓縮檔案，提升網站效能。

Nginx 設定

Nginx 伺服器安裝了 ngx_brotli 模組之後，只要啟用 brotli_static 功能，伺服器就自動檢查檔案是否有 .br 結尾的 Brotli 靜態壓縮檔版本，使用靜態壓縮檔可以省去壓縮的時間。

http {
  # 啟用 Brotli 壓縮功能
  brotli on;

  # 啟用 Brotli 靜態壓縮檔功能
  brotli_static on;

  # ...
}