PurgeCSS

比較

PurgeCSS 並非移除未使用的 CSS 的唯一工具。以下是 PurgeCSS 與其他兩個最常使用的移除未使用的 CSS 工具的比較。

UnCSS

正如其 README 中所述，UnCSS 以以下方式運作

  • HTML 檔案由 jsdom 載入，並執行 JavaScript。
  • PostCSS 解析所有樣式表。document.querySelector 會篩選出 HTML 檔案中找不到的選取器。
  • 其餘的規則會轉換回 CSS。

由於其 HTML 模擬和 JavaScript 執行，UnCSS 對於移除網路應用程式中未使用的選取器非常有效。

然而，其模擬在效能和實用性方面可能會付出代價。例如，要從 Pug 範本檔案移除未使用的 CSS，您需要將 Pug 轉換為 HTML，並在 jsdom 內模擬頁面。在此步驟之後，UnCSS 可以對每個選取器執行 document.querySelector，並執行步驟 4。

目前，UnCSS 可能是在某些情況下移除未使用的 CSS 最準確的工具。如果您不使用伺服器端渲染，而且您有一個包含 HTML 和 JavaScript 的簡單網站，它應該可以正常運作，並在 CSS 大小結果方面優於 PurgeCSS。

PurgeCSS 有針對 JavaScript 檔案的萃取器。其目標是提供更準確的結果，這將使 CSS 大小結果優於 UnCSS。由於 PurgeCSS 的模組化，開發人員可以為特定框架（Vue、React、Aurelia）和檔案類型（pug、ejs）建立萃取器。這樣，您就可以在不需要模擬的情況下獲得最準確的結果。

PurifyCSS

PurifyCSS 最大的缺點是缺乏模組化。然而，這也是其最大的優點。PurifyCSS 可以與任何檔案類型搭配使用，不只限於 HTML 或 JavaScript。

PurifyCSS 的運作方式是檢視檔案中的所有字詞，並將它們與 CSS 中的選取器進行比較。每個字詞都被視為一個選取器，這表示可能會錯誤地找出許多選取器已使用。例如，您可能會在一個段落中有一個字詞與 CSS 中的選取器相符。

PurgeCSS 透過提供建立萃取器的可能性來解決這個問題。萃取器是一個函式，它會取得檔案的內容，並萃取出其中使用的 CSS 選取器清單。它允許完美地移除未使用的 CSS。

萃取器可以用作解析器，它會傳回 AST（抽象語法樹），並檢視它以找出任何 CSS 選取器。這就是 purge-from-html 的運作方式。

您可以指定要針對每個檔案類型使用的萃取器，讓您獲得最準確的結果。但是，使用特定萃取器是可選的，您可以依賴預設萃取器。