CssMinimizerWebpackPlugin

このプラグインは、CSSを最適化および最小化するためにcssnanoを使用しています。

optimize-css-assets-webpack-pluginと同様ですが、ソースマップやクエリ文字列を使用するアセットでより正確であり、キャッシュを許可し、並列モードで動作します。

はじめに

まず、css-minimizer-webpack-pluginをインストールする必要があります。

npm install css-minimizer-webpack-plugin --save-dev

または

yarn add -D css-minimizer-webpack-plugin

または

pnpm add -D css-minimizer-webpack-plugin

次に、プラグインをwebpackの設定に追加します。例えば

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

これにより、本番モードでのみCSSの最適化が有効になります。

開発環境でも実行する場合は、optimization.minimizeオプションをtrueに設定します。

webpack.config.js

// [...]
module.exports = {
  optimization: {
    // [...]
    minimize: true,
  },
};

そして、好みの方法でwebpackを実行します。

ソースマップに関する注

devtoolオプションの値には、source-map、inline-source-map、hidden-source-map、nosources-source-mapでのみ動作します。

なぜでしょうか？ CSSはこれらのソースマップタイプのみをサポートしているからです。

このプラグインは、devtoolを尊重し、SourceMapDevToolPluginプラグインを使用しています。サポートされているdevtool値を使用すると、ソースマップの生成が有効になります。columnsオプションを有効にしたSourceMapDevToolPluginを使用すると、ソースマップの生成が有効になります。

エラーメッセージの位置をモジュールにマッピングするためにソースマップを使用します（これにより、コンパイルが遅くなります）。独自のminify関数を使用する場合は、ソースマップを正しく処理するためにminifyセクションを読んでください。

オプション

test

型: String|RegExp|Array<String|RegExp> - デフォルト: /\.css(\?.*)?$/i

ファイルと一致させるためのテスト。

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        test: /\.foo\.css$/i,
      }),
    ],
  },
};

include

型: String|RegExp|Array<String|RegExp> デフォルト: undefined

含めるファイル。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        include: /\/includes/,
      }),
    ],
  },
};

exclude

型: String|RegExp|Array<String|RegExp> デフォルト: undefined

除外するファイル。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        exclude: /\/excludes/,
      }),
    ],
  },
};

parallel

型: Boolean|Number デフォルト: true

ビルド速度を向上させるために、マルチプロセス並列実行を使用します。デフォルトの同時実行数: os.cpus().length - 1。

ℹ️ 並列化はビルドを大幅に高速化できるため、**強く推奨**されます。並列化が有効になっている場合、minimizerOptions内のパッケージは文字列（packageNameまたはrequire.resolve(packageName)）経由でrequireされる必要があります。詳細については、minimizerOptionsを参照してください。

Boolean

マルチプロセス並列実行を有効/無効にします。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

Number

マルチプロセス並列実行を有効にし、同時実行数を設定します。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: 4,
      }),
    ],
  },
};

minify

型: Function|Array<Function> デフォルト: CssMinimizerPlugin.cssnanoMinify

デフォルトのminify関数をオーバーライドできます。デフォルトでは、プラグインはcssnanoパッケージを使用します。未公開バージョンやフォークを使用およびテストする場合に役立ちます。

可能なオプション

• CssMinimizerPlugin.cssnanoMinify
• CssMinimizerPlugin.cssoMinify
• CssMinimizerPlugin.cleanCssMinify
• CssMinimizerPlugin.esbuildMinify
• CssMinimizerPlugin.lightningCssMinify（以前はCssMinimizerPlugin.parcelCssMinify。パッケージがリネームされましたが、後方互換性のために残しています）
• async (data, inputMap, minimizerOptions) => {return {code: "a{color: red}", map: "...", warnings: [], errors: []}}

警告

parallelオプションが有効な場合は、minify関数内で常にrequireを使用してください.

Function

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          level: {
            1: {
              roundingPrecision: "all=3,px=5",
            },
          },
        },
        minify: CssMinimizerPlugin.cleanCssMinify,
      }),
    ],
  },
};

Array

関数の配列がminifyオプションに渡された場合、minimizerOptionsも配列である必要があります。minify配列内の関数のインデックスは、minimizerOptions配列内の同じインデックスのオプションオブジェクトに対応します。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: [
          {}, // Options for the first function (CssMinimizerPlugin.cssnanoMinify)
          {}, // Options for the second function (CssMinimizerPlugin.cleanCssMinify)
          {}, // Options for the third function
        ],
        minify: [
          CssMinimizerPlugin.cssnanoMinify,
          CssMinimizerPlugin.cleanCssMinify,
          async (data, inputMap, minimizerOptions) => {
            // To do something
            return {
              code: `a{color: red}`,
              map: `{"version": "3", ...}`,
              warnings: [],
              errors: [],
            };
          },
        ],
      }),
    ],
  },
};

minimizerOptions

型: Object|Array<Object> デフォルト: { preset: 'default' }

Cssnanoの最適化オプション。

Object

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

Array

minify配列内の関数のインデックスは、minimizerOptions配列内の同じインデックスのオプションオブジェクトに対応します。minimizerOptionsをオブジェクトとして使用する場合、すべてのminify関数がそれを受け入れます。

並列化が有効になっている場合、minimizerOptions内のパッケージは文字列（packageNameまたはrequire.resolve(packageName)）経由でrequireされる必要があります。この場合、require/importを使用しないでください。

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: require.resolve("cssnano-preset-simple"),
        },
      }),
    ],
  },
};

processorOptions（⚠ cssnanoのみ）

型: Object デフォルト: { from: assetName }

cssnanoのprocessoptionsのオプションをフィルタリングできます。parser、stringifier、およびsyntaxは、関数またはインポートされるモジュールを示す文字列のいずれかになります。

警告

関数が渡された場合、parallelオプションは無効にする必要があります。.

import sugarss from "sugarss";

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        parallel: false,
        minimizerOptions: {
          processorOptions: {
            parser: sugarss,
          },
        },
      }),
    ],
  },
};

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          processorOptions: {
            parser: "sugarss",
          },
        },
      }),
    ],
  },
};

warningsFilter

型: Function<(warning, file, source) -> Boolean> デフォルト: () => true

css-minimizerの警告をフィルタリングできます（デフォルトはcssnano）。警告を保持する場合はtrueを返し、それ以外の場合は偽の値（false/null/undefined）を返します。

警告

ソースマップを使用しない場合、source引数にはundefinedが含まれます。

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        warningsFilter: (warning, file, source) => {
          if (/Dropping unreachable code/i.test(warning)) {
            return true;
          }

          if (/file\.css/i.test(file)) {
            return true;
          }

          if (/source\.css/i.test(source)) {
            return true;
          }

          return false;
        },
      }),
    ],
  },
};

例

ソースマップを使用する

すべてのローダーでsourceMapオプションを有効にすることを忘れないでください。

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } },
        ],
      },
    ],
  },
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
  plugins: [new MiniCssExtractPlugin()],
};

すべてのコメントを削除する

すべてのコメント（/*!で始まるコメントを含む）を削除します。

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            "default",
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

カスタムミニファイアcssoを使用する

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.cssoMinify,
        // Uncomment this line for options
        // minimizerOptions: { restructure: false },
      }),
    ],
  },
};

カスタムミニファイアclean-cssを使用する

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.cleanCssMinify,
        // Uncomment this line for options
        // minimizerOptions: { compatibility: 'ie11,-properties.merging' },
      }),
    ],
  },
};

カスタムミニファイアesbuildを使用する

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.esbuildMinify,
      }),
    ],
  },
};

カスタムミニファイアlightningcssを使用する（以前は@parcel/css）

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.lightningCssMinify,
        // Uncomment this line for options
        // minimizerOptions: { targets: { ie: 11 }, drafts: { nesting: true } },
      }),
    ],
  },
};

カスタムミニファイアswcを使用する

webpack.config.js

module.exports = {
  // Uncomment if you need source maps
  // devtool: "source-map",
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.swcMinify,
        // Uncomment this line for options
        // minimizerOptions: {},
      }),
    ],
  },
};

貢献

まだ読んでいない場合は、貢献ガイドラインを読む時間を取ってください。

貢献

ライセンス

MIT