CSSファイルから未使用のスタイルを削除する4つの方法

CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。

BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。

サイトのキャプチャ

4 Ways to Remove Unused CSS
by Chidume Nnamdi

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

再利用可能なUIコンポーネント内の未使用CSS

使用されていないCSSを削除することは、再利用可能なUIコンポーネントを使用する場合に便利です。
bit.devのコンポーネントを例に解説します。

サイトのキャプチャ

bit.devのReactコンポーネント

bit.devで、検索を備えたヘッダ、search-barのコンポーネントを持つシンプルなReactアプリを見てましょう。

サイトのキャプチャ

search-bar

ヘッダとsearch-barコンポーネントの両方で同じグローバルCSSが必要です。search-barコンポーネントをbit.devコレクションにエクスポートすると、bit.devではそのファイルを依存関係として識別します。

bit.devはエラーを返します、コンポーネントはグローバルCSSファイルに依存しています。

エラーメッセージ

エラーメッセージ

エラーを解消するために、CSSファイルを追加します。

CSSファイルを追加

CSSファイルを追加

CSSを使用してコンポーネントを 「unused-css-example」コレクションにエクスポートします。

エクスポートが完了すると、コンポーネントは「unused-css-example」コレクションに含まれます。

サイトのキャプチャ

unused-css-example

style.cssもコレクションに追加され、これでsearch-barの依存関係になりました。npmをインストールしたり、新しいプロジェクトにビットインポートすると、search-barコンポーネントとは関係のないスタイルが追加されます。

サイトのキャプチャ

search-bar

サイトのキャプチャ

style

それでは、未使用のCSSを削除する4つの方法について解説します。

1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法

PurgeCSSは、CSSの未使用のスタイルを削除するのに非常に効果的なツールです。

サイトのキャプチャ

PurgeCSS
PurgeCSS -GitHub

PurgeCSSの優れた点は、開発ワークフローに統合できることです。ターミナルからCLIツールとして使用できます。npmでグローバルにインストールします。

ターミナルで次のコマンドを実行します。

このコマンドはindex.css(--cssフラグ)とindex.html(--contentフラグ)に含まれている未使用のセレクタをすべて削除します。

npmレジストリで利用可能で、次のコマンドでインストールできます。

開発の依存関係としてインストールされているため、本番環境に移行するときに追跡されません。

JavaScriptファイルを作成し、次のコードを記述します。

new Purgecss(...)に渡されるオブジェクトのコンテンツとCSSには、PurgeCSSにプロジェクト内の.htmlと.cssファイルを収集して未使用のCSSをパージするように指示するglobパターンが含まれています。

purgeメソッドが呼び出され、purgecssResultには未使用のスタイルが削除されたcssが格納されます。

ノードを使用してファイルを実行します。

PurgeCSSの使い方は、以前にも当ブログで紹介しました。

2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法

PurifyCSSもまた、PurgeCSSと同様に素晴らしいツールです。

サイトのキャプチャ

PurifyCSS
PurifyCSS -GitHub

PurifyCSSでは、任意のCSSファイルに対してプロセス比較用に指定されたすべてのHTMLファイルを取得することで機能します。HTMLファイルと指定されたCSSファイルを検索し、冗長なCSSのスタイルを削除し、掃除されたCSSを別のファイルに書き込み、HTMLファイルをそのCSSファイルに再リンクします。

制作者によると、
コンテンツ(HTML, JS, PHPなど)とCSSを取得し、使用されているCSSのみを返す関数。PurifyCSSは、元のCSSファイルを変更しません。ミニファイのように、新しいファイルに書き込むことができます。CSSのフレームワークを使用している場合、多くのセレクタが使用されていないことが多いので、非常に役立ちます。

PurifyCSSの使い方はとても簡単です

ファイルを作成し(purify.jsを呼び出します)、次のコードを追加します。

パッケージ「purify-css」からpurify関数を抽出しました。

次に、不要なスタイルを削除するHTMLとCSSファイルをそれぞれhtmlFilesとcssFilesに設定します。ファイルは配列で保持されます。ここでは、globパターンを使用してpurify-cssにプロジェクト内のすべての.htmlおよび.cssファイルを収集してパージするように指示します。

optsで構成を設定します。ここでは掃除されたCSSが保存されるパスとファイル名を設定するだけです。掃除されたCSSをミニファイするなど、他にも設定できる項目は多数あります。

次にpurify関数を呼び出し、htmlFiles、cssFiles、opts、および処理の完了時に処理結果とともに呼び出されるコールバック関数を渡します。

purify.jsを実行して、使用されていないcssをすべて削除します。

3. UnCSSで、CSSファイルから未使用のスタイルを削除する方法

UnCSSもNodeモジュールで、未使用のCSSを削除します。

サイトのキャプチャ

UnCSS
UnCSS -GitHub

purifyCSSで行ったように、未使用のスタイルを削除するオプションを指定して呼び出すJS APIがあります。

制作者によると、
UnCSSはスタイルシートから未使用のCSSを削除するツールです。複数のファイルで機能し、JavaScriptがインジェクションされたCSSもサポートします。

グローバルモジュールとしてインストールし、ターミナルから使用できます。

これで、システムのどこからでも使用できます。

UnCSSの基本的なコマンドラインでの使用法は次のとおりです。

src/app/app.component.htmlで使用されるすべてのcssは、usedcss.cssに書き込まれます。

JavaScriptの使用も簡単です。

uncss関数はuncssライブラリから抽出されます。htmlファイルはhtmlFilesに配列で配置され、構成はoptsに設定します。最後に、uncssはhtmlFiles、opts、およびエラーを保持するパラメータと結果を保持するパラメータを持つコールバック関数で呼び出されます。

これで、uncss.jsファイルを実行できます。

4. Chrome デベロッパーツール(手動)で、CSSファイルから未使用のスタイルを削除する方法

サイトのキャプチャ

Chrome デベロッパーツールのCoverage

Chrome デベロッパーツールのCoverageは、JavaScriptとCSSの未使用のコードを見つけるのに役立ちます。Chromeでデベロッパーツールを開き、「More tools」から「Coverage」をクリックします。

Coverageを開くと、キャプチャを開始するボタン、リロードしてキャプチャを開始するボタン、キャプチャを停止して結果を表示するボタンが表示されます。表示しているページを分析したい場合は、Webページをロードし、Coverageタブの○ボタンをクリックします。

しばらくすると、分析したリソースと使用されているコードの量を示すテーブルが表示されます。Webページにリンクされているすべてのファイル(CSSおよびJavaScript)が表示されます。各リソースはTotal Bytes(合計)とUnused Bytes(未使用)が表示され、リソースをクリックするとSourcesパネルにそのリソースが開きます。

CSSファイル内の未使用バイトがどれだけあるか確認できるので、あとは手動で削除したり、前述のツールを使用して削除します。

さらに詳しい情報は、下記をご覧ください。

まとめ

CSSファイルから未使用のスタイルを削除するための便利なツールがあります。Webページをチェックし、不要なコードがあるかどうか確認し、上記で紹介したツールを使用して削除することができます。

未使用のスタイルを削除すると、ページの読み込みが速くなり、スマホユーザーにとって貴重なデータ量を節約することもできます。

今回紹介したリストに追加したいものはありますか? コメントなどがあれば、気軽にメールかDMでご連絡ください。

sponsors

top of page

©2020 coliss