webpack4でTailwind CSSのファイルサイズ削減までやってみた

11107 ワード
purgecss webpack postcss tailwindcss webpack テキストリンク

Tailwind CSS
https://tailwindcss.com

作ったもの


Simple Collage Maker
ブラウザ上でローカルの画像ファイルを読み込み、連結して一枚の画像にするツール。
webpack + Vue.js + Tailwind CSS。CSSのファイルサイズ約8KB。(普通にMinifyしただけだと600KBくらいになります。)

ソースコードのファイル構成はこんな感じです。

インストール

webpackはインストール済みとして、CSSローダー類とTailwind CSSをインストールします。

$ npm i -D css-loader postcss-loader tailwindcss

CSSファイルを外部ファイルに出力してファイルサイズ削減もしたいので以下もインストールします。

$ npm i -D mini-css-extract-plugin @fullhuman/postcss-purgecss

設定

webpack4

webpack.config.js
// ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // ...

  plugins: [
    new MiniCssExtractPlugin({
      filename: "style.css"
    }),
    // ...
  ],

  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          { loader: "postcss-loader" }
        ]
      },
      // ...
    ]
  }
};

useでloaderの順番を間違えるとちゃんと動かずハマります。一応、BulmaなどでSassを使う場合は次の様な感じになります。(TailwindでSassが使えるかどうかは未確認です。)

      {
        test: /\.(sa|c|sc)ss$/,
        exclude: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
          { loader: "postcss-loader" },
          { loader: "sass-loader" }
        ]
      },

PostCSS

postcss.config.js
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.html", "./src/**/*.vue"],
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

contentで解析対象のファイルを指定。defaultExtractorは理解してません。最後の方、webpackがproductionモードの時のみpurgecssが呼び出される様になってます。...はスプレッド構文ですね。

Tailwind CSS

tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      display: ["Berkshire Swash", "sans-serif"]
    }
  },
  variants: {},
  plugins: []
};

デフォルトのフォントを弄っただけです。

使う

CSSファイルをmain.jsなどからインポートして使います。

style.css
@tailwind base;
@tailwind components;

.button {
    @apply shadow bg-gray-700 text-white font-bold py-2 px-4 rounded inline-block items-center text-center mb-2;
}

.button:hover {
    @apply bg-gray-600;
}

.button:focus {
    @apply outline-none;
}

/* ... */

@tailwind utilities;

以上です。