on:2019年3月28日sponsorsCSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS(CSS4までサポート)を掃除してくれるツールを紹介します。-GitHubDropCSSの特徴DropCSSの使い方DropCSSのパフォーマンスDropCSSの特徴DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。サポートされているセレクタCSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます。解析済みHTMLからチェックできないすべての一時的な擬似クラスおよび擬似要素セレクタは保持されます。合わせて、clean-cssのようなオプティマイザを使ってセレクタをグループ化したり、冗長なルールをマージ・削除したり、未使用のキーフレームを削除したりすることもお勧めします。順番としては、最初にDropCSSを実行するのが合理的です(最適化・軽量化してからDropCSS、最適化してDropCSSして軽量化、にするのか)。true;}},});console.log(cleaned.css);console.log(dropped);shouldDropは、HTML内で一致できなかったすべてのCSSセレクタに対して呼び出されます。保持する場合はfalse、削除する場合はtrueを返します。このフックを使用して、削除されたすべてのセレクタをログに記録することができます。デフォルトではDropCSSはごく少数のセレクタがテキストをターゲットにできないため、処理する前にHTMLからすべてのテキストノードを削除します。テキストノードを処理する必要がないことは、パフォーマンスを大幅に向上させます。:blankや:emptyなどいくつかの珍しい疑似クラスはテキストノードでアサートします。:not(:empty)のように組み合わせた場合、これは誤った削除、または誤ったセレクタの保持を招く可能性があります。keepTextをtrueに設定すると、パフォーマンスを犠牲にしてこれらを適切に機能させることができます。DropCSSのパフォーマンス似たような効果を持つツールでのパフォーマンスの比較です。59.6%未使用バイト数は、test.htmlの適用範囲です。約400の未使用バイト数は明示的/共有ホワイトリストによるもので、ツールがそのCSSを検出・削除できないことによるものではありません。約175の未使用バイトはChromeで無効になっているベンダプレフィックス(-moz、-ms)のプロパティとセレクタが原因です。Purgecssは、属性セレクタや複雑なセレクタをサポートしていません。