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 v5, 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 值可启用源映射生成。

在 SourceMapDevToolPlugin 中启用 columns 选项也允许生成源映射。

使用源映射将错误消息位置映射回其原始模块（请注意，这可能会减慢编译速度）。

如果您使用自己的 minify 函数，请参阅 minify 部分以正确处理源映射。

选项

名称	类型	默认值	描述
test	String|RegExp|Array<String|RegExp>	/\.css(\?.*)?$/i	用于匹配文件的测试。
include	String|RegExp|Array<String|RegExp>	undefined	要包含的文件。
exclude	String|RegExp|Array<String|RegExp>	undefined	要排除的文件。
parallel	Boolean|Number	true	启用或禁用多进程并行运行。
minify	Function|Array<Function>	CssMinimizerPlugin.cssnanoMinify	允许覆盖默认的压缩函数。
minimizerOptions	Object|Array<Object>	{ preset: 'default' }	Cssnano 优化 选项。
warningsFilter	Function<(warning, file, source) -> Boolean>	() => true	允许过滤 css-minimizer 警告。

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 或 os.availableParallelism() - 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: []}}

[!警告]

当 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) => {
            //  Custom minifier function
            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/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 = {
  // devtool: "source-map", // Uncomment for source maps
  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 = {
  // devtool: "source-map", // Uncomment for source maps
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin({
        minify: CssMinimizerPlugin.swcMinify,
        // Uncomment this line for options
        // minimizerOptions: {},
      }),
    ],
  },
};

贡献

我们欢迎所有贡献！

如果你是新用户，请花一些时间阅读我们的贡献指南。

贡献

许可证

MIT