webpack 5 中需在 cssminimizerplugin 配置中显式设 sourcemap: true，配合 devtool 并统一 postcss 链路（如禁用 postcss.config.js 中的 cssnano），才能正确生成 sourcemap；vue cli 须通过 configurewebpack 覆盖 minimizer 并在 preset 中清空 discardcomments；压缩异常或体积增大多因 loader 顺序错、插件重复或提取逻辑混乱所致。
Webpack 5 里 css-minimizer-webpack-plugin 怎么配才不丢 sourcemap
生产环境压缩 CSS 时默认会删空格、注释，但 sourcemap 容易断掉——根本原因是插件默认关闭 sourcemap 选项，且 Webpack 的 devtool 配置和插件配置要协同。
- 必须在
optimization.minimizer中显式启用sourcemap: true，仅靠 Webpack 的devtool: 'source-map'不够 -
css-minimizer-webpack-pluginv4+ 默认用esbuild引擎，它不支持生成独立 sourcemap 文件，得切回cssnano（需手动安装cssnano并传入minimizerOptions） - 若用
postcss-loader做前处理，确保它的sourceMap也设为true，否则链路断在第一步
示例最小配置：
new CssMinimizerPlugin({
minimizerOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
parallel: true,
sourcemap: true, // 这行不能少
})
Vue CLI 项目里怎么关掉 CSS 压缩的注释清理
Vue CLI 3+ 内部用 css-minimizer-webpack-plugin，但没暴露顶层开关，直接改 vue.config.js 的 configureWebpack 最可靠。
- 不要动
css.extract或css.sourceMap，那些只影响提取和映射，不控制注释保留 - 必须覆盖
optimization.minimizer数组，把默认插件替换成自定义实例，并在minimizerOptions.preset里禁用注释移除 -
discardComments: { removeAll: false }不够，得用removeAllButFirst: true或直接传空对象让 cssnano 跳过该步
简写写法：
configureWebpack: config => {
if (config.mode === 'production') {
config.optimization.minimizer = [
new CssMinimizerPlugin({
minimizerOptions: {
preset: ['default', { discardComments: {} }],
},
}),
];
}
}
PostCSS 插件顺序错导致压缩后样式异常
压缩不是孤立步骤，postcss-loader 和 css-minimizer-webpack-plugin 共享同一套 PostCSS 配置，顺序一乱，比如 autoprefixer 在压缩后才跑，就可能把带浏览器前缀的声明误删。
- 检查
postcss.config.js里插件顺序：必须是autoprefixer→cssnano（如果用了），而css-minimizer-webpack-plugin内部若再跑一遍cssnano就重复了 - 常见错误是同时在
postcss.config.js里写了cssnano，又在 Webpack 里配了css-minimizer-webpack-plugin，结果压缩两遍，z-index等数值被转成科学计数法 - 推荐做法：关掉
postcss.config.js中的cssnano，只留autoprefixer等转换类插件，压缩全交给css-minimizer-webpack-plugin
压缩后 CSS 变大？可能是启用了 CSS in JS 的冗余提取
某些框架（如 Next.js、Gatsby）或自定义配置中，CSS 提取逻辑和压缩器冲突，会导致 @import 或 :global 块被重复注入，压缩反而增重。
- 开
stats: true查看打包产物，确认是否多个.css文件被分别压缩又合并 -
splitChunks若对 CSS 启用了cacheGroups，但没配enforce: true，可能导致部分样式漏进 JS chunk，压缩器无法处理，最终体积失控 - 用
webpack-bundle-analyzer打开分析报告，重点看node_modules下的 CSS 是否被多次打包（比如normalize.css出现两次）
真正起效的压制点不在压缩参数，而在提取逻辑是否干净——压缩只是最后一道工序，前面链路歪了，越压越肿。
压缩本身很薄，容易被当成“开关”去调，但实际起作用的是整个 CSS 构建链路上的 loader 顺序、插件启停、提取策略。这些地方不动，光调 css-minimizer-webpack-plugin 的 discardComments，大概率白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
