將 CSS Minify(壓縮)或 Beautify(格式化)
3 步壓縮·格式化 CSS:
CSS 壓縮·格式化工具在多種情境中很有用:
在部署到生產環境之前壓縮 CSS 以減小檔案大小。提高頁面載入速度,降低頻寬成本。通常可以減少 30-50% 的大小。
格式化壓縮的第三方 CSS 函式庫以理解內容。使除錯和自訂變得容易。可以將 Bootstrap、Tailwind 等的壓縮版本轉換為易讀格式。
格式化壓縮的 CSS 以便團隊成員審查。透過統一的格式提高程式碼品質,縮短審查時間。
壓縮大型 CSS 檔案以改善網站效能。有助於提高 Lighthouse 分數和 Core Web Vitals,對 SEO 也有積極影響。
格式化格式混亂的舊 CSS 檔案以統一樣式。提高可維護性,便於發現錯誤。
CSS 壓縮(Minification)和格式化(Beautification/Formatting)是最佳化 CSS 程式碼和提高可讀性的重要技術。
CSS 壓縮透過刪除註解、刪除空格·換行、刪除不必要的分號等方式減小檔案大小。功能保持不變僅最小化大小。例: `body { margin: 0; padding: 0; }` → `body{margin:0;padding:0}`。通常可以減少 30-50% 的大小,提高頁面載入速度。
CSS 格式化透過在壓縮的程式碼中新增適當的換行和縮排來提高可讀性。為每個選擇器換行,清晰排列屬性,應用一致的樣式。使除錯、維護、程式碼審查變得容易。
此工具使用 JavaScript 在瀏覽器內執行 CSS 處理。CSS 程式碼不會傳送到伺服器,因此可以安全處理機密專案的程式碼。離線也能工作,完全保護隱私。
通常可以減少 30-50% 的檔案大小。註解或空格越多的 CSS 減少率越高。例如 100KB 的 CSS 檔案通常可以壓縮到 50-70KB,顯著改善頁面載入速度。
壓縮的 CSS 可以透過「格式化」按鈕轉換為可讀性高的格式。但是刪除的註解或原始換行位置無法恢復。因此建議一定要將壓縮前的原始檔案作為備份儲存。
此工具專用於標準 CSS。Sass、SCSS、Less 等前處理器語言請先編譯為 CSS 後使用。許多前處理器都有壓縮選項(--style compressed 等),也可以考慮使用那些。
不會,此工具完全不更改 CSS 的功能。僅操作空格、換行、註解,選擇器、屬性、值保持原樣。壓縮前後在瀏覽器中的顯示結果完全相同。
只要瀏覽器的記憶體允許,大檔案也能處理。通常幾 MB 的 CSS 檔案可以正常工作。但是非常大的檔案(10MB 以上)可能會導致瀏覽器執行緩慢。
目前不支援產生原始碼映射。在正式的開發環境中,建議使用 Webpack、Gulp、Grunt 等建置工具及其原始碼映射功能。此工具最適合簡單的壓縮·格式化。
此工具可以檢測基本的語法錯誤,但沒有完整的驗證功能。如果有語法錯誤可能無法正確壓縮·格式化。建議事先使用 W3C CSS Validator 等進行語法檢查。
CSS 壓縮透過提高頁面載入速度對 SEO 產生積極影響。Google 將頁面速度作為排名因素之一,有助於改善 Lighthouse 分數和 Core Web Vitals。行動使用者體驗也會提升。