webpack 5 默认不压缩 css，必须显式配置 css-minimizer-webpack-plugin 并配合 minicssextractplugin 提取独立文件，且插件须置于 optimization.minimizer 数组中，否则无效。
Webpack 5 默认不压缩 CSS，哪怕你已设 mode: "production"、用了 MiniCssExtractPlugin 提取样式，最终生成的 .css 文件仍是明文——这是最常被忽略的前提。
为什么 css-minimizer-webpack-plugin 不生效？
插件没运行，通常不是它坏了，而是根本没被 Webpack 调用：
-
css-minimizer-webpack-plugin必须放在optimization.minimizer数组里，写进plugins字段会被完全忽略 - 只装插件不够，必须搭配
MiniCssExtractPlugin：它负责把 CSS 从 JS bundle 里抽成独立文件；没这一步，插件连目标文件都找不到 - 若项目仍用
style-loader注入<style></style>标签，那压根没生成.css文件，插件自然跳过 -
optimization.minimize被手动设为false会直接禁用所有 minimizer，包括这个插件
loader 顺序错会导致 CSS 压缩失败
提取和压缩是两步，但 loader 链路断了，压缩就无从谈起：
-
MiniCssExtractPlugin.loader必须放在use数组第一位，否则 CSS 不会被提取 - 正确顺序是：
MiniCssExtractPlugin.loader→css-loader→postcss-loader（如需 PostCSS）→sass-loader（如需 Sass） - 如果
postcss-loader放在MiniCssExtractPlugin.loader后面，PostCSS 规则（比如@layer、嵌套）可能被跳过，压缩后样式异常 - 别在
postcss.config.js里重复启用cssnano：它和css-minimizer-webpack-plugin底层冲突，会导致注释清理失效、calc()被错误折叠
怎么配才能真正压缩并保留 sourcemap？
默认配置下 sourcemap 很容易断掉，体积也可能不降反增：
-
css-minimizer-webpack-pluginv4+ 默认用 esbuild 引擎，它不支持生成独立 sourcemap 文件——必须显式设sourcemap: true，并切回cssnano - 安装
cssnano：npm install --save-dev cssnano，然后在插件配置中指定：minimizerOptions: { preset: ["default", { discardComments: {} }] } -
postcss-loader的sourceMap也得设为true，否则链路从第一步就断 - 加
parallel: true：大量 SCSS 文件时，不加这个选项构建会明显变慢
压缩后体积没变小？检查这几个暗雷
表面看压缩了，实际体积可能更大，问题往往藏在配置细节里：
-
sourceMap开启后，base64 编码的映射内容会直接追加在 CSS 末尾，中等项目轻松多出 80–150 KB -
sassOptions.outputStyle没设成'compressed'：Sass 层默认是'nested'，它不删空格换行，后续压缩效果大打折扣；这个配置必须写在module.rules.use[loaderIndex].options.sassOptions下，写错位置会被 Sass 编译器直接忽略 - 命令行直编译时漏了
--style=compressed --no-source-map，base64 sourceMap 可能额外膨胀 - 入口 JS 中零散
import './a.css'和import './b.css'，打包后顺序 = 最终规则顺序；顺序错会导致样式覆盖、主题失效，这不是压缩问题，但常被误判为“压缩没起作用”
最容易被忽略的是责任边界：谁做前处理（Sass）、谁做兼容转换（PostCSS）、谁做最终压缩（css-minimizer-webpack-plugin），三者必须对齐，缺一环或重叠一环，压缩就不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
