HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS

CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介します。

サイトのキャプチャ

DropCSS -GitHub

DropCSSの特徴

DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。

  • 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。
    参考: サポートされているセレクタ
  • CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます。
  • 解析済みHTMLからチェックできないすべての一時的な擬似クラスおよび擬似要素セレクタは保持されます。

合わせて、clean-cssのようなオプティマイザを使ってセレクタをグループ化したり、冗長なルールをマージ・削除したり、未使用のキーフレームを削除したりすることもお勧めします。順番としては、最初にDropCSSを実行するのが合理的です(最適化・軽量化してからDropCSS、最適化してDropCSSして軽量化、にするのか)。

DropCSSの使い方

DropCSSのインストール

使い方とAPI

  • shouldDropは、HTML内で一致できなかったすべてのCSSセレクタに対して呼び出されます。保持する場合はfalse、削除する場合はtrueを返します。さらに、このフックを使用して、削除されたすべてのセレクタをログに記録することができます。
  • keepText: デフォルトではDropCSSはごく少数のセレクタがテキストをターゲットにできないため、処理する前にHTMLからすべてのテキストノードを削除します。テキストノードを処理する必要がないことは、パフォーマンスを大幅に向上させます。しかし、:blankや:emptyなどいくつかの珍しい疑似クラスはテキストノードでアサートします。例えば、:not(:empty)のように組み合わせた場合、これは誤った削除、または誤ったセレクタの保持を招く可能性があります。
    keepTextをtrueに設定すると、パフォーマンスを犠牲にしてこれらを適切に機能させることができます。

DropCSSのパフォーマンス

似たような効果を持つツールでのパフォーマンスの比較です。

入力ファイル
  • test.html
    18.8 KB minified, 502 dom nodes
  • styles.min.css
    27.67 KB(clean-cssで最適化・軽量化)
ツール ツールのサイズ 出力サイズ 削減率 時間 未使用バイト数
DropCSS 2.16 MB 6.60 KB 76.15% 138ms 575 / 8.5%
UnCSS 13.7 MB 6.72 KB 75.71% 429ms 638 / 9.3%
Purgecss 2.53 MB 8.01 KB 71.05% 78ms 1,806 / 22.0%
PurifyCSS 3.45 MB 15.4 KB 44.34% 186ms 9,440 / 59.6%
  • 未使用バイト数は、test.htmlの適用範囲です。
  • 約400の未使用バイト数は明示的/共有ホワイトリストによるもので、ツールがそのCSSを検出・削除できないことによるものではありません。
  • 約175の未使用バイトはChromeで無効になっているベンダプレフィックス(-moz、-ms)のプロパティとセレクタが原因です。
  • Purgecssは、属性セレクタや複雑なセレクタをサポートしていません。

sponsors

top of page

©2019 coliss