css-minimizer-webpack-plugin 是 Webpack 5+ 官方推荐的 CSS 压缩方案，替代已废弃的 optimize-css-assets-webpack-plugin；它默认不生效，需显式安装、注册并配合 MiniCssExtractPlugin 提取 CSS 后才能压缩独立文件。
css-minimizer-webpack-plugin 是 Webpack 5+ 官方推荐的 CSS 压缩方案，替代了已废弃的 optimize-css-assets-webpack-plugin。如果你在生产环境没看到 CSS 文件变小，大概率是它根本没生效。
为什么 css-minimizer-webpack-plugin 默认不工作
Webpack 5 不像 JS 那样对 CSS 自动启用压缩 —— 即使你设了 mode: "production"，CSS 依然原样输出。必须显式安装并注册插件，否则 .css 文件体积不会变化。
- 只装
css-minimizer-webpack-plugin不够，还得确保已配置MiniCssExtractPlugin（或类似提取 CSS 的 loader），否则 CSS 还在 JS 里，插件无目标可压 - 插件必须放在
optimization.minimizer数组里，不能塞进plugins字段 —— 放错位置等于没配 - 若项目用的是
style-loader+css-loader直接注入 DOM，那 CSS 根本没生成独立文件，插件也无从下手
正确安装与基础配置步骤
先装依赖：
npm install -D css-minimizer-webpack-plugin mini-css-extract-plugin
再在 webpack.config.js 中配置：
- 用
MiniCssExtractPlugin.loader替换style-loader，把 CSS 提取成单独文件 - 在
module.rules中为.css添加MiniCssExtractPlugin.loader、css-loader、postcss-loader（如有） - 把
css-minimizer-webpack-plugin实例加进optimization.minimizer数组，注意：它不接受字符串，必须是new CssMinimizerPlugin()
示例关键片段：
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer: [new CssMinimizerPlugin()],
},
module: {
rules: [{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
}],
},
plugins: [new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })],
};
CssMinimizerPlugin 常见参数调优
默认压缩足够用，但遇到特殊场景需手动干预：
-
parallel: true（默认）开启多进程压缩，大项目建议保留；CI 环境若内存紧张可设为false -
minify: CssMinimizerPlugin.cssnanoMinify是默认值，兼容性好；如需更激进压缩（如移除所有注释、合并重复规则），可换用CssMinimizerPlugin.cleanCssMinify，但需额外装clean-css - 想保留某些注释（如版权头），用
presets: ["default", { discardComments: { removeAllButFirst: true } }] - 若压缩后样式错乱，大概率是
postcss插件（如autoprefixer）和压缩顺序冲突 —— 确保postcss-loader在css-loader之后、CssMinimizerPlugin之前执行
容易被忽略的兼容性陷阱
CSS 压缩不是“越小越好”，有些优化会破坏运行时行为：
-
@import规则被内联后，可能触发浏览器并发请求数限制，反而拖慢首屏；建议提前用postcss-import处理，别依赖压缩器 - 含 CSS 变量（
--xxx）或自定义属性的文件，cssnano默认会尝试压缩它们 —— 若变量值含空格或特殊字符，可能被错误截断，此时应禁用normalizeWhitespace选项 - Webpack 5.90+ 对
css-minimizer-webpack-plugin的sourceMap支持有 bug，若启用了devtool: "source-map"且压缩后报错，先降级插件到4.2.2或关闭 CSS sourceMap
真正起作用的压缩，永远建立在 CSS 已被正确提取、loader 执行顺序无误、且未引入破坏性 postcss 插件的基础上。别只盯着插件本身，先检查构建链路是否完整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
