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

サイト構築 -CSS

Post on:2020年2月6日

再利用可能な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 tag --all 1.0.0

1	$ bit tag --all 1.0.0

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

エラーメッセージ

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

$ bit add src/style.css

1	$ bit add src/style.css

CSSファイルを追加

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

$ bit export eden.unused-css-example

1	$ bit export eden.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でグローバルにインストールします。

npm i purgecss -g

1	npm i purgecss -g

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

purgecss --css index.css --content index.html

1	purgecss --css index.css --content index.html

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

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

npm i purgecss -D

1	npm i purgecss -D

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

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

// purgecss.js
var Purgecss = require('purgecss') // ES5
import Purgecss from 'purgecss' // ES6
var purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
var purgecssResult = purgecss.purge()

// purgecss.js

var Purgecss = require('purgecss') // ES5

import Purgecss from 'purgecss' // ES6

var purgecss = new Purgecss({

content: ['**/*.html'],

css: ['**/*.css']

})

var purgecssResult = purgecss.purge()

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

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

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

node purgecss.js

1	node purgecss.js

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

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

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の使い方はとても簡単です

npm i purify-css -D

1	npm i purify-css -D

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

// purify.js
const purify = require("purify-css")
const htmlFiles = ['*.html'];
const cssFiles = ['*.css'];
const opts = {
    output: 'purified.css'
};
purify(htmlFiles, cssFiles, opts, function (res) {
    log(res);
});

// purify.js

const purify = require("purify-css")

const htmlFiles = ['*.html'];

const cssFiles = ['*.css'];

const opts = {

output: 'purified.css'

};

purify(htmlFiles, cssFiles, opts, function (res) {

log(res);

});

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

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

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

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

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

node purify.js

1	node purify.js

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

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

UnCSS
UnCSS -GitHub

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

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

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

npm i uncss -g

1	npm i uncss -g

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

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

uncss src/app/app.component.html >> usedcss.css

1	uncss src/app/app.component.html >> usedcss.css

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

JavaScriptの使用も簡単です。

// uncss.js
const uncss = require("uncss")
const htmlFiles = ["./index.html"]
const opts = {
    csspath: "styles/",
    stylesheets: ["themes.css"]
}
uncss(htmlFiles, opts, (err, res) => {
    if(err)
        console.error(err)
    console.log(res)
})

// uncss.js

const uncss = require("uncss")

const htmlFiles = ["./index.html"]

const opts = {

csspath: "styles/",

stylesheets: ["themes.css"]

}

uncss(htmlFiles, opts, (err, res) => {

if(err)

console.error(err)

console.log(res)

})

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

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

node uncss.js

1	node 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ファイル内の未使用バイトがどれだけあるか確認できるので、あとは手動で削除したり、前述のツールを使用して削除します。

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