好久不見，我在我的開發博客上帶來了一個有趣的實驗結果。我是一名喜歡 Django 的開發者，最近對於網頁前端優化的一個方面，即 CSS Minification，產生了好奇，於是親自進行了實驗。結果相當有趣，我想和大家分享，特別是對於我這樣以 Python 為主的開發者而言，這會具有重要意義。

進行這個實驗的原因：突如其來的疑問❓

平常在開發網頁服務時，我也不自覺地會有「前端優化果然還是 JavaScript（Node.js）為基礎的工具最好！」的想法。因為 Node.js 生態系統實在是牢牢掌控著前端構建及優化工具，這樣的先入為主的想法似乎是不言而喻的。CSS Minification（CSS 壓縮）同樣如此。webpack、gulp 等構建工具中包含的 css-minimizer-webpack-plugin 或 clean-css 等 Node.js 為基礎的庫，給人的感覺幾乎成為了標準。

甚至當我請求 ChatGPT、Gemini 等 AI 幫我推薦 CSS minifier 時，它們幾乎都會優先推薦 npm 的 clean-css-cli，並隨附「這個工具是最快且最強大的。」的說明。

但是我突然產生了這樣的疑問。

「究竟連這種接近於簡單文本壓縮的 CSS Minification，Node.js 為基礎的工具是否真的比 Python 為基礎的工具更快或更高效呢？我實在需要為了前端優化而設置 Node.js 環境嗎？」

為了尋找這個問題的答案，我開始進行了一個小實驗。

實驗內容與過程

實驗非常簡單。我以目前運行中的我的博客的主 CSS 文件之一 style.css（約67KB）為對象，使用 Node.js 為基礎的 clean-css-cli 和 Python 為基礎的 csscompressor 這兩個工具進行壓縮，然後比較其結果的大小和內容。

1. 原始文件確認

jesse@laptop:~/my/path/to/css$ ll style.css
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css

原始 style.css 文件大小為 67,325 字節。（為了可讀性，包含空格、換行符和註解。）

2. 使用 Node.js clean-css-cli 進行壓縮

通過 npm 全球安裝 clean-css-cli，將 style.css 壓縮為 style.min.css。

jesse@laptop:~/my/path/to/css$ npm install -g clean-css-cli
jesse@laptop:~/my/path/to/css$ cleancss -o ./style.min.css ./style.css

3. 使用 Python csscompressor 進行壓縮

在 Python 環境中，使用 csscompressor 模塊將 style.css 壓縮為 python_style.min.css。

(venv)jesse@laptop:~/my/path/to/css$ python -m csscompressor style.css > python_style.min.css

4. 比較壓縮文件大小

使用 ll 命令比較壓縮後生成的文件大小。

jesse@laptop:~/my/path/to/css$ ll style*
-rw-rw-r-- 1 jesse jesse 67325  5月 23 19:10 style.css         # 原始
-rw-rw-r-- 1 jesse jesse 46740  6月 23 22:39 style.min.css     # npm clean-css 結果
-rw-rw-r-- 1 jesse jesse 46828  6月 23 23:47 python_style.min.css # Python csscompressor 結果

5. 打開壓縮文件目視比較內容

CSS 壓縮比較結果截圖

我用 nvim 打開了兩個壓縮文件，目視比較它們的內容。（參考上文的截圖）

實驗結果分析

  • 原始 style.css（67,325 字節）
  • clean-css-cli（style.min.css）（46,740 字節）: 約 30.58% 大小減少！
  • csscompressor（python_style.min.css）（46,828 字節）: 約 30.45% 大小減少！

看到結果我也大吃一驚。

  1. 驚人的大小減少效果：兩個工具都將原始 CSS 文件大小減少了約 30% 以上。這清楚地展示了，由於空格、換行符和註解等為可讀性所添加的所有多餘字符實際上佔用了字節，僅僅通過去除這些字符就能帶來相當顯著的文件大小節省，將直接貢獻於網頁服務的加載速度提升。推出應用時，千萬不要認為這麻煩，務必進行壓縮，效果會超乎想像。
  2. 幾乎無差的壓縮效率：clean-css-cli 只比 csscompressor 小 88 字節，而在壓縮效率上顯示出幾乎相同的水平。
  3. 相同的結果文件內容：用 nvim 進行比較時，兩個壓縮文件的內容幾近完全一致。這 88 字節的差別甚至讓人難以理解的一致性。這顯示出每個工具在內部使用的算法或優化方法存在些微差異，但這些差異微不足道，最終達成去除不必要元素的目標毋庸置疑。

這個實驗的意義與啟示：打破先入為主的觀念！

我的實驗結果給出的最大信息就是「前端優化並不一定必須依賴 JavaScript（Node.js）基礎的工具」。

許多 Python 後端開發者像我一樣，面對前端優化工作時，可能會感到「啊，要不要安裝 Node.js 環境呢？npm 該安裝什麼呢？」這樣的負擔。然而，這個實驗展示了，像 CSS Minification 這樣的文本處理基礎的優化任務中，編程語言或運行環境的性能差異可能微乎其微。

這所意義是明確的。

  • 技術棧選擇的自由：如果開發者主力使用 Python 後端，那麼無需搭建單獨的 Node.js 環境，利用 csscompressor 等 Python 基礎的優良庫依舊可以有效優化前端 CSS。

  • 簡化的開發工作流程：不必被複雜的 webpack 設置或 npm 腳本所束縛，可以通過簡單的 Python 腳本或 Shell 命令輕鬆將 CSS 優化步驟整合到構建及部署管道中。這對於特別小型項目或承重效率的團隊將是巨大的優勢。

  • 專注於本質：重要的不是「使用什麼工具」，而是「如何有效地進行優化」。通過這次實驗，我成功將 CSS 文件大小減少了約 30%，達成了提升用戶體驗和網頁服務性能這一根本目標。

當然，JavaScript 生態系統的前端工具提供的功能（打包、轉譯、樹搶佔等）要更為龐大和強大。但是，在像 CSS Minification 這樣的特定優化任務中，利用熟悉的開發環境可能會更加高效，這是這次實驗所展示的。

我打算在未來的 Python 基礎網頁服務中進行 CSS Minification 時，積極利用 Python 工具，而不再額外增加 Node.js 的依賴。

大家呢？你們也是否抱有類似的成見，對這次實驗結果有什麼想法，請在評論中分享吧！