CssMinimizerWebpackPlugin

免责声明: CssMinimizerWebpackPlugin 是由社区成员维护的第三方包,它可能不支持与 webpack 相同的支持、安全策略或许可证,并且它不受 webpack 维护。

npm node tests cover discussion size

此插件使用 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

关于源映射的说明

仅适用于 devtool 选项的 source-mapinline-source-maphidden-source-mapnosources-source-map 值。

为什么?因为 CSS 仅支持这些源映射类型。

该插件尊重 devtool 并使用 SourceMapDevToolPlugin 插件。使用支持的 devtool 值启用源映射生成。使用启用了 columns 选项的 SourceMapDevToolPlugin 启用源映射生成。

使用源映射将错误消息位置映射到模块(这会降低编译速度)。如果您使用自己的 minify 函数,请阅读 minify 部分以正确处理源映射。

选项

名称类型默认值说明
test字符串 | 正则表达式 | 数组 <字符串 | 正则表达式>/\.css(\?.*)?$/i用于匹配文件的测试。
include字符串 | 正则表达式 | 数组 <字符串 | 正则表达式>未定义要包含的文件。
exclude字符串 | 正则表达式 | 数组 <字符串 | 正则表达式>未定义要排除的文件。
parallel布尔值 | 数字true启用/禁用多进程并行运行。
minify函数 | 数组 <函数>CssMinimizerPlugin.cssnanoMinify允许覆盖默认的 minify 函数。
minimizerOptions对象 | 数组 <对象>{ preset: 'default' }Cssnano 优化 选项
warningsFilter函数 <(warning, file, source) -> 布尔值>() => true允许过滤 css-minimizer 警告。

test

类型:字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> - 默认值:/\.css(\?.*)?$/i

用于匹配文件的测试。

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

include

类型:字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> 默认值:未定义

要包含的文件。

webpack.config.js

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

exclude

类型:字符串 | 正则表达式 | 数组 <字符串 | 正则表达式> 默认值:未定义

要排除的文件。

webpack.config.js

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

parallel

类型:布尔值 | 数字 默认值:true

使用多进程并行运行来提高构建速度。默认并发运行数:os.cpus().length - 1

ℹ️ 并行化可以显著加快构建速度,因此强烈推荐。如果启用并行化,则 minimizerOptions 中的包必须通过字符串(packageNamerequire.resolve(packageName))进行要求。在 minimizerOptions 中了解更多信息

布尔值

启用/禁用多进程并行运行。

webpack.config.js

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

数字

启用多进程并行运行并设置并发运行数。

webpack.config.js

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

minify

类型:函数 | 数组 <函数> 默认值: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) => {
            // 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 中的包必须通过字符串(packageNamerequire.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 的选项 processoptionsparserstringifiersyntax 可以是函数或表示将要导入的模块的字符串。

警告

如果传递了一个函数,则必须禁用 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;
        },
      }),
    ],
  },
};

示例

使用 sourcemaps

别忘了为所有加载器启用 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