CssMinimizerWebpackPlugin

Этот плагин использует cssnano для оптимизации и минификации вашего CSS.

Подобно 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 через ваш предпочитаемый метод.

Примечание о картах исходных кодов

Работает только с source-map, inline-source-map, hidden-source-map и nosources-source-map значениями для опции devtool.

Почему? Потому что CSS поддерживает только эти типы карт исходных кодов.

Плагин учитывает devtool и использует плагин SourceMapDevToolPlugin. Использование поддерживаемых значений devtool позволяет сгенерировать карту исходных кодов. Использование SourceMapDevToolPlugin со включенной опцией columns позволяет сгенерировать карту исходных кодов.

Используйте карты исходных кодов для сопоставления местоположений сообщений об ошибках с модулями (это замедляет компиляцию). Если вы используете собственную функцию 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)). Подробнее в 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

Позволяет переопределить функцию минификации по умолчанию. По умолчанию плагин использует пакет 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: []}}

[!ВНИМАНИЕ]

Всегда используйте require внутри функции minify при включении опции parallel.

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 options.

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/import.

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

processorOptions (⚠ только cssnano)

Тип: Object По умолчанию: { from: assetName }

Позволяет фильтровать опции processoptions для cssnano. 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: {},
      }),
    ],
  },
};

Содействие

Пожалуйста, уделите время, чтобы прочитать наши рекомендации по участию, если вы еще этого не сделали.

CONTRIBUTING

Лицензия

MIT