CSS 檔案最小化：壓縮樣式表的做法與工具

檔案最小化 (Minification) 是移除源碼中的空白、註解、換行等。

移除不必要的內容

移除空白字元

原始

.btn {
  color: red;
  
  background: blue;
}

最小化

.btn{color:red;background:blue}

移除註解

原始

/* 按鈕基礎樣式 */
.btn {
  /* 文字顏色 */
  color: #333;
  /* TODO: 修改背景色 */
  background: #fff;
}

最小化

.btn{color:#333;background:#fff}

移除最後的分號

原始

.header {
  margin: 0;
  padding: 0;
}

最小化

.header{margin:0;padding:0}

小工具

安裝 Minifier 套件後，可在未開啟的檔案上或已開啟的檔案中，按 滑鼠右鍵 → Minify，即可產生最小化的檔案，檔案的名稱特徵為 檔名.min.css。

縮寫優化

這部分內容在 前篇文章 有詳細解說，請移駕至此觀看 縮寫表示法!

選取器優化

移除重複選擇器

原始

.btn, .button {
  color: blue;
}
.btn, .button {
  background: white;
}

最小化

.btn,.button{color:blue;background:white}

合併規則

原始

h1 { font-size: 2em; }
h1 { color: blue; }
h1 { margin: 0; }

最小化

h1{font-size:2em;color:blue;margin:0}

壓縮之外，更該做的事

最小化能省下的通常是一到三成，但 移除沒用到的樣式 往往能省下更多。多數專案的樣式表裡都躺著大量從未被套用的規則，可以用工具掃描後清除。

手段	效果
移除未使用的樣式	最大
gzip 或 brotli 傳輸壓縮	大
最小化	中
縮寫屬性	小

常見問題

最小化和 gzip 是同一件事嗎？

不是，但可以疊加。最小化是刪掉不必要的字元，gzip 或 brotli 是傳輸時的壓縮。兩者一起用效果最好。

要自己手動壓縮嗎？

不用。現在的建置工具在打包時就會自動處理，開發時維持好讀的原始碼即可。

壓縮後怎麼除錯？

靠原始碼對應檔。它讓開發者工具把壓縮後的位置對回原始檔案，除錯時仍能看到原本的行號與選取器。

延伸閱讀

引入外部的樣式檔縮寫表示法效能優化