PurgeCSS

比較

PurgeCSS は、未使用の CSS を削除する唯一のツールではありません。以下は、PurgeCSS と他の 2 つの主要な未使用 CSS 削除ツールとの比較です。

UnCSS

README に示されているように、UnCSS は以下の方法で動作します。

  • HTML ファイルは jsdom によって読み込まれ、JavaScript が実行されます。
  • PostCSS はすべてのスタイルシートを解析します。 `document.querySelector` は、HTML ファイルに見つからないセレクターを除外します。
  • 残りのルールは CSS に戻されます。

HTML のエミュレーションと JavaScript の実行により、UnCSS は Web アプリケーションから未使用のセレクターを効果的に削除できます。

ただし、そのエミュレーションはパフォーマンスと実用性の面でコストがかかる可能性があります。たとえば、Pug テンプレートファイルから未使用の CSS を削除するには、Pug を HTML に変換し、jsdom 内でページをエミュレートする必要があります。この手順の後、UnCSS は各セレクターで `document.querySelector` を実行し、手順 4 を実行できます。

現時点では、UnCSS はいくつかの状況において未使用の CSS を削除するための最も正確なツールと言えるでしょう。サーバーサイドレンダリングを使用せず、HTML と JavaScript を使用したシンプルな Web サイトがある場合、UnCSS は正しく動作し、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` の動作方法です。

ファイルタイプごとに使用するエクストラクターを指定できるため、最も正確な結果を得ることができます。ただし、特定のエクストラクターの使用はオプションであり、デフォルトのエクストラクターに依存することもできます。