不要なCSSをPurgeCSSで削除するVite環境での設定

Vite環境でPurgeCSSを使用する設定方法を紹介します。具体的には、vite.config.jsに設定を記述します。

また、vite-plugin-compressionを導入して、事前にファイルを GZIP で圧縮します。

目的

BootstrapやTailwind CSSなど便利な CSS フレームワークがあります。しかし、Bootstrap を使用するには minify されたものでも 160K バイトものファイルをダウンロードする必要があります。

ただ、CSS フレームワークに含まれる定義は、ほとんどは使用することの泣いて k 技ばかりです。

そこで、PurgeCSSなどのポスト・プロセッサーで使用していない CSS 定義を自動的に削除することが可能です。

使用していない CSS を削除するポスト・プロセッサーは PurgeCSS 以外にもPurifycssがありますが、ここではVite環境でPurgeCSSを使用する設定方法を紹介します。

また、CSS だけでなく HTML や JavaScript ファイルを事前に GZIP 圧縮してくれるプラグインのインストール方法を合わせて紹介します。

方法

PurgeCSS のインストール

Vite環境でPurgeCSSを使用するためには、postcss-purgecssをインストールします。PurgeCSS のマニュアルには、postcssもインストールするように書かれていますが、依存パッケージとして自動的にインストールされます。

$ npm install -D @fullhuman/postcss-purgecss

事前にファイルを GZIP 圧縮

圧縮する理由

Web に使用される HTML や CSS、JavaScrupt は、全てテキストファイルです。ですので、一緒に使用される画像ファイルと異なり圧縮することで更にファイルサイズを小さくすることが可能です。

そこで Web サーバには、動的にファイルを圧縮して送り出す機能があります。もちろん圧縮のプロセスにはそれなりの CPU パワーを使用されますが、サーバとクライアント共に現代の CPU は強力なので、普通はネットワークがボトルネックとなります。そこで多少時間をかけてでも圧縮したほうが、トータルでの時間を短縮できます。

しかし、人気なサイトになると、同じファイルを何度もリクエストがあるたびに圧縮するのは流石に無駄です。そのような場合には、事前に圧縮しておいたファイルを配信することも可能です。

自動的にファイル圧縮

この事前圧縮は何も特別な方法ではないので、手動やかんたんなスクリプトでgzipコマンドにかけても問題ありません。しかし、HTML や CSS、JavaScript をバージョンアップしたのに圧縮ファイルを更新し忘れるというエラーはいかにもありそうです。

そこで、配布ファイルを作成するときに自動的に圧縮ファイルを作成するプラグインvite-plugin-compressionを使用します。

自動圧縮プラグインのインストール

自動的に圧縮ファイルを作成するプラグインvite-plugin-compressionを使用するには、npmコマンドでプラグインのパッケージをインストールします。

$ npm install -D vite-plugin-compression

Vite 環境の設定

必要なパッケージをインストールしたら、Vite 環境の設定をします。

具体的には既存のvite.config.jsを編集して、次の設定をいい感じにマージします。PurgeCSS と圧縮は最終段階でのみ必要で、開発段階のファイル更新ごとに実行すると時間お無駄なので、npm run buildしたときに実行されるようにしています。

import viteCompression from "vite-plugin-compression";
import purgecss from "@fullhuman/postcss-purgecss";

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // console.log(command, mode)
  if (mode === "production") {
    return {
      plugins: [viteCompression()], // 既存のプラグインに追加します。
      css: {
        postcss: {
          plugins: [
            purgecss({
              content: ["dist/*.html", "dist/assets/*.js"],
              css: ["dist/assets/*.css"],
              // safelist: [/filepond-*/],
            }),
          ],
        },
      },
    };
  } else {
    //
  }
});

PurgeCSS は優秀ですが、必要な CSS の定義まで削除してしまうことがあります。その場合は、残しておきたいクラス名などを設定に追加します。

残しておくクラスの設定は、whitelistに指定するという記述を見かけることがあります。しかしこの whitelistによる設定は、使用できません 。

明示的に残しておきたいクラスの指定は、設定例ではコメントアウトしていますがsafelistに記述します。

ファイルサイズの削減例

では、実際の例でどのくらいファイルサイズを削減できるのでしょうか？

非常に簡単な Web アプリをSvelteとSolidJSで作成した例は次のようになりました。この　 Web アプリは、File アップローダのFilepondとBootstrap5を使用しています。ただ、Bootstrap は、ほとんど使っていないと言っても良いくらいの量です。

どの程度 CSS フレームワークの機能を使用するかによって削減できる量は異なりますが、ファイルサイズをかなり削減できることが確認できます。

ただ、ほぼ同じ機能の Web アプリなのに SolidJS での CSS が、Svelte に比べて小さいのは謎です。