[ 目次 ]

• はじめに
• 前回のおさらい
• Purgecssインストール
• glob-all, purgecss-webpack-pluginインストール
• laravel-mix のbuild設定を変更
• productionビルドしたCSSのサイズを比較
• 最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、前回作成したLaravel & Tailwind CSSのプロジェクトにPurgecssの導入していきます。Purgecssを利用して未使用のスタイルを除外するようにしていきます。
Purgecssについては公式サイトをご確認ください。

Purgecss

Purgecssを知るきっかけは以下の動画になります。
情報提供に感謝です🙇🏻

Purgecss with Tailwind - Laravel Mix & Vue CLI 3

■ 検証環境

PHP	Laravel	Tailwind CSS	Purgecss
^7.2.4	5.7.*	0.7.3	1.1.0

前回のおさらい

LaravelにTailwind CSSを導入する

前回はLaravelプロジェクトを新たに作成し、Tailwind CSSを組み込むところまで実施しました。
welcomeページでTailwind CSSが反映されていることまで確認しています。
今回はこちらの続きになります。

Purgecssインストール

■ npmを利用する場合

$ npm install purgecss --save-dev

■ yarnを利用する場合

$ yarn add purgecss --dev

glob-all, purgecss-webpack-pluginインストール

laravel-mixはwebpackを利用しているのでpurgecss-webpack-pluginのインストールも必要になります。
また、glob-allはファイル検索に利用しているようでした。
この2つのライもインストールしておきます。

■ npmを利用する場合

$ npm install glob-all purgecss-webpack-plugin --save-dev

■ yarnを利用する場合

$ yarn add glob-all purgecss-webpack-plugin --dev

laravel-mix のbuild設定を変更

公式ドキュメントのこちら の内容に変更していきます。

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");

// Custom PurgeCSS extractor for Tailwind that allows special characters in
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
}

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
   tailwindcss('./tailwind.js'),
]);

// Only run PurgeCSS during production builds for faster development builds
// and so you still have the full set of utilities available during
// development.
if (mix.inProduction()) {
  mix.webpackConfig({
    plugins: [
      new PurgecssPlugin({

        // Specify the locations of any files you want to scan for class names.
        paths: glob.sync([
          path.join(__dirname, "resources/views/**/*.blade.php"),
          // path.join(__dirname, "resources/js/**/*.vue") 現状Vueは導入されていないので除外
        ]),
        extractors: [
          {
            extractor: TailwindExtractor,

            // Specify the file extensions to include when scanning for
            // class names.
            extensions: ["html", "js", "php", "vue"]
          }
        ]
      })
    ]
  });
}

productionビルドしたCSSのサイズを比較

Purgecssの導入前、導入後のproductionビルドしたapp.cssのファイルサイズを比較します。
（yarn production or npm run productionでビルドしたapp.cssファイルです）

$  du -h public/css/app.css
320K	public/css/app.css
↓
$  du -h public/css/app.css
4.0K	public/css/app.css

以下のキャプチャのwelcomeページしか存在しない状態なので、かなり不要なスタイルが削られています。

今回のリポジトリは以下です。

laravel-x-tailwindcss-x-purgecss

最後に

js, cssなど静的コンテンツを圧縮するのは当たり前になりましたが、未使用のスタイルを除外することが簡単にできるとはしりませんでした。
今回は Tailwind CSSが対象ですが、他のCSSフレームワークでも今後は対応できるようにしたいと思いました。