PurgeCSS vs Purify-CSS vs UnCSS: 技術比較と選定ガイド

Web パフォーマンス最適化において、使用されていない CSS を削除（Tree Shaking）することは不可欠です。purgecss、purify-css、uncss はこの課題を解決する代表的なツールですが、その内部動作と現状には明確な差があります。本稿では、現役のフロントエンドアーキテクトの視点から、これら 3 つのツールを技術的に深掘りし、なぜ purgecss が現在のデファクトスタンダードなのかを解説します。

🛠️ 動作原理：静的解析 vs ヘッドレスブラウザ

ツール選定で最も重要なのは、どのように「使用されている CSS」を判定するかです。

purgecss は、ファイルの内容を静的に解析します。

• HTML、JS、テンプレートファイルをスキャンし、クラス名や ID を抽出します。
• ヘッドレスブラウザを起動しないため、非常に高速で CI/CD パイプラインに組み込みやすいです。

// purgecss: 静的ファイルパスを指定して実行
const purgeCSS = require('purgecss');

const result = purgeCSS({
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/assets/css/main.css']
});
// result[0].css に最適化された CSS が含まれる

purify-css は、ヘッドレスブラウザ（PhantomJS）を使用します。

• ページを実際にレンダリングし、DOM に存在するクラスを検出します。
• JavaScript で動的に追加されるクラスも検出できますが、実行環境のセットアップが重く、遅いです。

// purify-css: URL または HTML 文字列を指定
const Purify = require('purify-css');

Purify.purify(['./src/**/*.js'], './src/css/*.css', {
  info: true,
  minify: true
}, function(result) {
  console.log(result); // 最適化された CSS 文字列
});

uncss もヘッドレスブラウザ（jsdom/PhantomJS）に依存します。

• 指定した URL にアクセスし、レンダリング結果に基づいて CSS を削減します。
• 動的なインタラクション（クリックで表示されるメニューなど）の検出には追加設定（ignore オプション）が必要です。

// uncss: URL を指定して実行
const uncss = require('uncss');

uncss(['http://localhost:3000'], {
  css: './src/css/main.css',
  ignore: ['.js-enabled'] // 動的クラスを無視
}, function(error, output) {
  console.log(output); // 最適化された CSS
});

🚀 ビルドツールとの統合

現代のフロントエンド開発では、Webpack、PostCSS、Vite などとの連携が必須です。

purgecss は、主要なエコシステムに公式プラグインを提供しています。

• @fullhuman/postcss-purgecss や purgecss-webpack-plugin を使うことで、設定ファイルに数行追加するだけで導入できます。

// purgecss: PostCSS プラグインとして設定
// postcss.config.js
module.exports = {
  plugins: {
    purgecss: {
      content: ['./public/**/*.html'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    }
  }
}

purify-css は、Webpack プラグインが存在しますが、更新頻度は低いです。

• 設定は可能ですが、近年の Webpack バージョンとの互換性維持がコミュニティ依存になっています。

// purify-css: Webpack プラグイン例
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
  plugins: [
    new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, 'src/*.html'))
    })
  ]
}

uncss は、Grunt や Gulp との相性が良く設計されていました。

• 現代のモジュールバンドラーとの統合は、ラッパープラグインに依存しており、ネイティブサポートは乏しいです。

// uncss: Gulp タスク例
const gulp = require('gulp');
const uncss = require('gulp-uncss');

gulp.task('css', function () {
  return gulp.src('src/css/*.css')
    .pipe(uncss({ html: ['src/**/*.html'] }))
    .pipe(gulp.dest('dist'));
});

⚠️ メンテナンス状況とリスク

パッケージの長期的な安定性は、アーキテクチャ選定において最も重要な要素の一つです。

purgecss は活発にメンテナンスされています。

• 定期的なリリースがあり、新しい CSS 機能（例：CSS Variables）やフレームワーク（Tailwind CSS など）への対応が迅速です。
• セキュリティ vulnerabilities への対応も迅速です。

purify-css はメンテナンスが停滞しています。

• 最後の主要な更新から時間が経過しており、Node.js の新しいバージョンでの動作保証が難しくなっています。
• 依存している PhantomJS は開発が終了しており、環境構築自体がリスクを孕んでいます。

uncss は事実上開発が終了しています。

• GitHub リポジトリでは Issue や PR の対応が滞っており、新規プロジェクトでの使用は推奨されません。
• 依存ライブラリの古さにより、インストール自体が失敗するケースが増えています。

📊 機能比較サマリー

💡 結論：なぜ PurgeCSS なのか

purgecss が唯一の現実的な選択肢です。

ヘッドレスブラウザに依存する purify-css や uncss は、理論的には JavaScript で生成されるクラスを捉えやすいという利点がありました。しかし、実際の開発現場では、ビルド時間の増大と環境構築の複雑さというコストの方が大きすぎます。また、PhantomJS の開発終了により、これらのツールは基盤技術を失っています。

一方、purgecss は静的解析の限界を、safelist（除外リスト）機能で補っています。これにより、動的なクラス名も設定ファイルで明示的に守ることができ、結果としてビルドの再現性と速度が担保されます。

最終的なアドバイス: 新規プロジェクトでは迷わず purgecss を採用してください。既存プロジェクトで uncss や purify-css を使用している場合は、技術的負債として認識し、段階的に purgecss への移行計画を立てるべきです。パフォーマンスとメンテナンス性の両面で、それが最善のアーキテクチャ判断となります。