CSS 壓縮的運作原理
壓縮器以具狀態感知的 tokenizer 走訪你的樣式表，區分受保護區域（字串字面值與 url() 值）與可安全折疊和移除的可編輯空白。
- 保護字串與 URL. 在任何其他轉換之前，tokenizer 先識別每個引號字串（"…" 或 '…'）以及每個 url(…) 引數並原樣暫存。後續處理絕不觸及這些位元組，因此含空格的 background-image URL 或含標點的 content 屬性值都會精確保留。
- 移除注釋. 開啟切換時，
/* … */區塊會被移除。如果同時開啟授權注釋切換，/*! … */區塊則會保留，讓 MIT、Apache 和 BSD 授權標頭依這些授權要求留存於輸出中。 - 折疊空白. 每段連續的空格、定位字元和換行折疊為單一空格，然後去除 CSS 結構字元
{、}、;、:和,周圍的空白。選擇器與值列表的重排方式與瀏覽器解析器讀取它們的方式相同。 - 最佳化值. 選擇性步驟會將十六進位色碼轉為小寫、將成對的 6 位數十六進位通道折疊為 3 位數簡寫（
#aabbcc→#abc），並去除零值的尺寸單位（0px→0）。去除零值步驟會跳過transform()呼叫內部的值，因為該情境下單位是必要的。 - 回報位元組節省. 原始文字與壓縮文字都以
new TextEncoder().encode(…).byteLength測量——這正是 CDN 或 HTTP 伺服器在連線上看到的 UTF-8 位元組數。指標列顯示原始大小、壓縮後大小、節省的位元組數以及節省百分比。
為什麼要壓縮 CSS？
- 更快的渲染阻塞載入. 瀏覽器在完成 CSS 解析前不會繪製任何像素。樣式表減少 30% 能縮短這段阻塞時間、提升 First Contentful Paint，並直接反映在你的 Lighthouse 效能分數上。
- 更低的 CDN 出網費用. CloudFront、Cloudflare 和 Fastly 均按每 GB 出網流量計費。每次頁面瀏覽都傳輸的樣式表削減 20%，一旦每月流量突破數百萬次瀏覽，就會在帳單上形成真實的費用差異。
- 更小的嵌入式與電子郵件 CSS. 交易電子郵件範本需要將 CSS 內嵌以確保在 Outlook 和 Gmail 中正常渲染，每多一個位元組都使你更接近 Gmail 的 102 KB 裁截門檻。內嵌前先壓縮可讓郵件大小維持在上限以下。
- 無需建置工具依賴. 偶發性的一次性工作、沒有建置流程的老舊 repo，以及隔離網路的環境，並不總是能容納 Node.js 工具鏈。你可以在這裡直接執行壓縮，無需安裝 PostCSS、cssnano 或任何其他工具。
常見應用場景
CSS 壓縮幾乎出現在每個前端建置流程的末尾，以及少數 runtime 情境中，在這些情境下位元組數量至關重要。
- 正式環境建置流程：Webpack、Vite、Rollup 和 Parcel 在正式建置模式的預設設定中都包含 CSS 壓縮步驟。在提交前於此執行壓縮，可讓你在不觸發完整建置的情況下驗證輸出。
- 將 CSS 嵌入
<style>標籤：將關鍵 CSS 內嵌於 HTML 文件的伺服器渲染框架，受益於與獨立樣式表相同的位元組節省，而較小的內嵌 CSS 也能縮短 Time to First Byte。 - 交易與行銷電子郵件：電子郵件 HTML 需要內嵌所有 CSS，因此樣式表中的每一 KB 都會增加到郵件總大小。內嵌前先壓縮可讓郵件大小維持在 ESP 大小上限以下。
實際操作範例
貼上一個 1 KB 的規則集，含兩空格縮排、選擇器之間的空白行、頂部的授權注釋區塊，以及冗長的十六進位色碼（如 #FFFFFF）和加零填充的邊距（如 margin: 0px）。開啟所有選項後，輸出折疊至約 600 位元組——節省約 40%——而渲染後的頁面與原始碼在位元組上完全相同。
壓縮會改變我的 CSS 行為嗎？
使用預設切換時不會。壓縮器只移除 CSS 解析器已捨棄的位元組——空白、注釋、選擇性的最後分號——並在單位有意義的 transform() 內部跳過處理。每個選擇器、屬性與值都會保留。
支援 SCSS 或 LESS 嗎？
僅在編譯為純 CSS 後才支援。SCSS 和 LESS 語法（變數、巢套、mixin、& 父選擇器）不是有效的 CSS，壓縮器會破壞它。請先編譯預處理器原始碼，再將編譯輸出貼入此處。
為什麼我的授權注釋被移除了？
「移除注釋」預設為開啟，會清除每個 /* … */ 區塊。啟用「保留 /*! 授權注釋」以保留以 /*! 開頭的區塊。MIT、Apache 和 BSD 授權均要求版權標頭隨重新發布的 CSS 一同出現。
我能節省多少？
手工撰寫的 CSS 通常能節省 15 至 35%。含大量注釋或深度縮排且有許多色碼字面值的檔案可達 40%。Sass 或 CSS-in-JS 編譯輸出通常已部分壓縮，節省較少——典型為 5 至 15%。
在瀏覽器分頁中執行 CSS 壓縮，可完全省去 Node.js 工具鏈。在上方貼上樣式表，調整選項以符合你想要的壓縮積極程度，然後複製輸出或下載為 .min.css。無需上傳、無需帳號、無需供應商函式庫。