/note/tech

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

以下メモ。

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

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

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

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