使用されていないCSSコードを削除するにはどうすればよいですか?

フロントエンド プロジェクトを継続的に繰り返すと、一部の CSS コードが使用されなくなる場合があります。これらの未使用のコードは、アプリケーションのパフォーマンスに影響を与える可能性があります。

では、未使用の CSS コードを効率的に削除するにはどうすればよいでしょうか? この記事では、未使用の CSS コードを自動的に検出して削除できる強力なツール PurgeCSS を紹介します。Vue、React、またはその他のフロントエンド フレームワークのいずれであっても、PurgeCSS は簡単に統合できます。

次に、PurgeCSS を構成および使用する方法と、プロジェクトのニーズに応じて未使用の CSS コードを削除するプロセスをカスタマイズするのに役立ついくつかの高度な構成オプションを見てみましょう。

目次

未使用のCSS

PurgeCSS とは何ですか?

PurgeCSS はどのように機能しますか?

JSライブラリ/フレームワークと組み合わせる

反応 + パージCSS

Vue + PurgeCSS

高度な構成オプション

キーフレーム 和 フォントフェイス

コンテンツとCSS

エクストラクター

変数

セーフリストとコメント

関連リンク

---

未使用のCSS

Chrome ブラウザのカバレッジ パネルを使用すると、現在のページ上のすべての CSS ファイルの使用状況を確認できます (Ctrl+Shift+P でカバレッジ パネルを開き、「カバレッジ」を検索します)。

各ファイルの合計サイズ、未使用の CSS のサイズ、および未使用の CSS の割合が表示されます。ご覧のとおり、CSS の大部分はファイル内で使用されていません。

クリックしてファイルを開くと、このファイルでどのスタイルが使用されているか (青)、どのスタイルが使用されていないか (赤) が表示されます。

デフォルトでは、ブラウザーはユーザーの画面にコンテンツを表示する前に、検出したすべての外部スタイル シートをダウンロード、解析、処理する必要があります。すべての外部スタイル シートはネットワークからダウンロードする必要があります。これらの追加のネットワーク タスクにより、ユーザーが画面に何も表示されるまで待機する時間が大幅に増加する可能性があります。

CSS を使用しないと、ブラウザのレンダー ツリー構築の速度も低下します。レンダー ツリーは DOM ツリーに似ていますが、各ノードのスタイルも含まれている点が異なります。レンダー ツリーを構築するには、ブラウザは DOM ツリー全体を調べて、どの CSS ルールが各ノードに適用されるかを確認する必要があります。未使用の CSS が多いほど、ブラウザが各ノードのスタイルを計算するのに多くの時間がかかる可能性があります。

PurgeCSS とは何ですか?

PurgeCSS は、使用されていない CSS を削除するツールです。多くの場合、アプリケーションの最適化に役立ちます。Bulma、Bootstrap、Tailwind などの CSS フレームワークを使用する場合、未使用の CSS が大量に存在します。ここで PurgeCSS が登場します。コンテンツと CSS ファイルを分析して、使用されていないスタイルを特定し、それらを削除します。PurgeCSS は、Vue.js、React、Gatsby などのほとんどの一般的な JavaScript ライブラリ/フレームワークで使用できます。

PurgeCSS は未使用の CSS を削除する唯一のツールではありませんが、モジュール性、使いやすさ、および広範なカスタマイズ オプションで際立っています。モジュール性により、開発者は特定のユースケースやフレームワーク用のモジュールエクストラクターを作成できます。エクストラクターは、ファイルの内容を読み取り、使用されている CSS セレクターのリストを抽出する関数です。

PurgeCSS は、さまざまな種類のファイルを処理できる非常に堅牢なデフォルトのエクストラクターを提供します。ただし、デフォルトでは、PurgeCSS は @、:、/ などの特殊文字を含む未使用の CSS コードを無視します。したがって、PurgeCSS は、使用しているファイル タイプまたは CSS フレームワークに完全に適合していない可能性があります。

さらに、PurgeCSS には多くの設定項目があり、必要に応じて動作をカスタマイズできます。たとえば、PurgeCSS には、fontFace、キーフレーム、エクストラクター、CSS などのオプションが含まれています。カスタマイズにより、PurgeCSS のパフォーマンスと効率を向上させることができます。PurgeCSS は習得が簡単で、詳細なドキュメントが用意されています。この記事の執筆時点で、PurgeCSS は npm で毎週 900,000 件以上ダウンロードされ、GitHub では 740,000 以上のスターを獲得しています[1]。

PurgeCSS はどのように機能しますか?

PurgeCSS は運用環境での使用に適しており、コンテンツと CSS を分析し、未使用のスタイルを削除できます。開発中に PurgeCSS を実行する必要はありません。開発中に未使用のスタイルが頻繁に作成される可能性があるため、毎回 PurgeCSS を実行する必要があります。

代わりに、実稼働ビルドに対してのみ実行できます。こうすることで、削除されたスタイルを再作成する必要がなくなります。したがって、アプリの運用準備が整ったら、PurgeCSS を 1 回実行できます。一般的なライブラリ/フレームワークで PurgeCSS を使用し始める前に、プレーン JavaScript で PurgeCSS がどのように動作するかを見てみましょう。コードは以下のように表示されます。

(async () => {
  const purgecss = await new PurgeCSS().purge({
    content: ['index.html'],
    css: ['style.css'],
  });

  console.log(purgecss);
})();

ここではコンテンツの1つとしてindex.html、CSSの1つとしてstyle.cssを指定していますが、さらに多くのコンテンツやCSSファイルを含めることができ、コンテンツはHTMLファイルに限定されません。上記のコードは、スタイルがクリアされた配列を返します。

コンテンツと CSS に加えて、実行したい内容と実行方法を正確に指定するための設定項目がさらに多くあります。上記の例は、通常の JavaScript プロジェクトに使用できます。PurgeCSS を使用するには、未使用のスタイルを削除するために 1 回実行される別の JavaScript ファイルが必要です。

クリアされたスタイルは、現在のスタイルを次のコードに置き換えることができます。

const { PurgeCSS } = require('purgecss');
const fs = require('fs');

(async () => {
  const purgecss = await new PurgeCSS().purge({
    content: ['index.html'],
    css: ['style.css'],
  });

  fs.writeFileSync('style.css', purgecss[0].css);
})();

JSライブラリ/フレームワークと組み合わせる

PurgeCSS は、React、Vue、Gatsby、Next.js、Nuxt.js などの一般的な JavaScript ライブラリ/フレームワークと互換性があります。React と Vue で PurgeCSS を使用する方法を見てみましょう。

反応 + パージCSS

まず、PurgeCSS とその依存関係をインストールする必要があります。

npm i --save-dev @fullhuman/postcss-purgecss

App.js ファイルを開き、次のコードを貼り付けます。

import "./App.css";

function App() {
  return <div className="App"></div>;
}

export default App;

上記のコードでは、App という名前の関数コンポーネントを作成し、クラス名が App の div を返しました。App.css は変更されていないため、次の未使用の CSS コードが含まれています。

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

package.json ファイルを開き、スクリプトの下に次のコードを追加します。

"postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"

post は任意の npm スクリプトに追加できるプレフィックスで、メイン スクリプトの実行時に自動的に実行されます。この例では、ビルド スクリプトの実行後に postbuild が実行されます。postbuild によって実行されるコマンドには 3 つのオプションが含まれます。

• --css オプション: PurgeCSS が処理する CSS ファイルを指定します。ファイル名の配列またはグローバル変数を指定できます。
• --content オプション: PurgeCSS が分析するコンテンツを指定します。
• --output オプション: 精製された CSS ファイルを書き込むディレクトリを指定します。デフォルトでは、結果がコンソールに表示されます。

基本的に、postbuild によって実行されるコマンドは次のことを行います。

1. build/static/css 内のすべての CSS ファイルをチェックします。
2. ファイル内で使用されているセレクターを照合し、未使用の CSS を削除します。
3. 新しい CSS ファイルを build/static/css に出力します。

ここで、npm run build を実行して React アプリのビルドを実行します。成功を確認するには、build/static/css にある CSS ファイルを開きます。出力は以下のコードに似ていますが、使用されている CSS のみが含まれています。

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  margin: 0;
}
code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
}
.App {
  text-align: center;
}
@-webkit-keyframes App-logo-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}
@keyframes App-logo-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn);
  }
}

Vue + PurgeCSS

PurgeCSS は次の方法で Vue にインストールできます。

vue add @fullhuman/purgecss

これにより、Vue アプリケーションに適した PurgeCSS 設定が設定された postcss.config.js ファイルが生成されます。これらの構成は必要に応じて変更できます。

アプリのコンテンツをいくつか更新し、Vue で PurgeCSS がどのように機能するかを見てみましょう。HelloWorld.vue に移動し、そのコードを次のものに置き換えます。

<template>
  <a href="#">Hello world</a>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
span {
  color: red;
}
</style>

ここではコンテンツが削減され、いくつかの未使用のスタイルが追加されます。次に、ターミナルで npm run build を実行してアプリをビルドし、最終的にビルドされた CSS を確認します。最後に、dist/css ディレクトリ内の CSS ファイルを開くと、使用されているスタイルのみを含む CSS 出力を見つけることができます。

a[data-v-70cf4e96] {
  color: #42b983;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

高度な構成オプション

上記では、コンテンツ、CSS、アウトラインの 3 つの構成オプションのみを示しました。他の構成オプションを使用して PurgeCSS をカスタマイズする方法を見てみましょう。

キーフレーム 和 フォントフェイス

PurgeCSS v2.0 より前では、未使用のフォントとキーフレーム コードはデフォルトで削除されていました。ただし、これらの関数を誤って使用すると、コードが壊れます。未使用のフォントとキーフレーム コードはデフォルトで変更されないままになるようになりました。このデフォルトの動作は、キーフレームとフォントフェイスのオプションを true に設定することで変更できます。

(async () => {
  const purgecss = await new PurgeCSS().purge({
    content: ['index.html'],
    css: ['style.css'],
    keyframes: true,
    fontFaces: true,
  });

  console.log(purgecss);
})();

purgecss.config.js 構成ファイル内のこれらの構成項目を変更することもできます。

// purgecss.config.js
module.exports = {
  content: ['index.html'],
  css: ['style.css'],
  keyframes: true,
  fontFaces: true,
}


(async () => {
  const purgecss = await new PurgeCSS().purge('./purgecss.config.js');
  console.log(purgecss);
})();

コンテンツとCSS

ファイルをリンクせずに、コンテンツと CSS 値を直接渡すことができます。

// purgecss.config.js
module.exports = {
  content: [
    {
      raw: '<html><body><p>Hello world</p></body></html>',
      extension: 'html',
    },
  ],
  css: [
    {
      raw: 'p { color: red }',
    },
  ],
};

エクストラクター

まれに、PurgeCSS が未使用の CSS の削除または使用済みの CSS の削除に失敗することがあります。この場合、カスタム エクストラクターを使用する必要があります。PurgeCSS は、ファイル内で使用されているセレクターのリストを取得するためにエクストラクターに依存します。

一部のパッケージは、特定の拡張子用のエクストラクターを提供します。たとえば、purgecss-from-js は .js 拡張子に固有です。特定のエクストラクターを使用してスケーリングすると、最高の精度が得られます。

// purgecss.config.js
import purgeJs from 'purgecss-from-js'
import purgeHtml from 'purgecss-from-html'

const options = {
  content: ['index.html'],
  css: ['style.css'],
  extractors: [
    {
      extractor: purgeJs,
      extensions: ['js']
    },
    {
      extractor: purgeHtml,
      extensions: ['html']
    }
  ]
}
export default options

変数

デフォルトでは、未使用の CSS 変数は削除されません。それらを削除する場合は、 purgecss.config.js ファイルで変数を true として指定する必要があります。

module.exports = {
    content: ['index.html'],
    css: ['style.css'],
    variables: true,
}

セーフリストとコメント

PurgeCSS は、最終的な CSS に保持しても安全なセレクターの指定をサポートしています。これは、PurgeCSS のセーフリスト オプションまたは特別な CSS 固有のコメントの 2 つの方法で実行できます。セーフリストの使用:

module.exports = {
    content: ['index.html'],
    css: ['style.css'],
    safelist: ['random', 'button'],
}

この場合、.random、#random、button、.button、および #button はすべて無視され、PurgeCSS によって削除されません。正規表現の使用をサポートしています。

module.exports = {
    content: ['index.html'],
    css: ['style.css'],
    safelist: [/red$/, /^bg/],
}

この場合、red で終わるセレクター (bg-red、btn-red など)、または bg で始まるセレクター (bg-blue、bg-red など) は削除されません。デフォルトでは、PurgeCSS はコメントを削除せず、PurgeCSS の動作をカスタマイズするために設計された特別なコメントのみを削除します。

特殊なアノテーションの共通セットを使用して、最終的な CSS に保持しても安全なセレクターを指定します。

/* purgecss start ignore */
h1 {
  color: pink;
  font-size: 2rem;
}
/* purgecss end ignore */

関連リンク

[1]GitHub: https://github.com/FullHuman/purgecss。