cssnano是生产环境压缩CSS最稳选择，基于PostCSS语义优化，需显式配置preset并确保autoprefixer在cssnano前、统一收口压缩逻辑、全链路开启sourceMap。
用 cssnano 压缩 CSS 文件最稳
生产环境压缩 CSS，cssnano 是当前最可靠的选择——它不是简单删空格，而是基于 PostCSS 做语义级优化，比如合并重复规则、移除不可达的 @keyframes、安全地缩短颜色值。很多项目用 clean-css 或 Webpack 内置的 MiniCssExtractPlugin + optimization.minimizer，但默认配置常漏掉关键压缩项，导致体积没真正压下去。
实操建议：
- 别直接依赖 Webpack 5+ 的默认 CSS 压缩，它底层调的是
cssnano，但默认启用preset: 'default'，会禁用部分激进但安全的转换（比如mergeLonghand） - 显式安装并配置
cssnano：在postcss.config.js中写明{ preset: ['default', { mergeLonghand: true, discardComments: { removeAll: true } }] } - 注意
z-index等数值型属性不会被重写，但color: #ff0000会被转成color: red（除非你关掉reduceValues）
postcss 配合 autoprefixer 的顺序不能错
压缩前必须完成自动加前缀，否则 cssnano 可能把带前缀的规则误判为冗余而删掉。典型错误是把 autoprefixer 放在 cssnano 后面，构建完发现 Flexbox 在旧版 Safari 上直接失效。
正确顺序只有一条：在 postcss.config.js 的 plugins 数组里，autoprefixer 必须排在 cssnano 之前。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 压缩后
display: -webkit-box消失，但目标浏览器仍需支持 iOS 12 -
grid-area被合并后，带前缀的-ms-grid-row未同步处理，布局错乱
Webpack 构建中绕不开的 MiniCssExtractPlugin 配置坑
MiniCssExtractPlugin 负责把 CSS 抽成独立文件，但它本身不压缩——压缩动作由后续的 cssnano（或其它 PostCSS 插件）完成。很多人以为只要开了 minimize: true 就万事大吉，其实只是启用了插件内置的简易压缩，连注释都删不干净。
关键配置点：
- 确保
MiniCssExtractPlugin.loader的 options 里没写死minimize: true（这已被废弃） - 压缩逻辑应统一收口到
postcss.config.js，而不是分散在 Webpack rule 的options里 - 开发时禁用
cssnano，靠mode: 'development'控制，别手动切if (process.env.NODE_ENV === 'production')，容易漏
Source map 映射错位？检查 sourceMap 开关链路
压缩后调试 CSS 时发现行号对不上，大概率是 sourceMap 在某一层被关掉了。PostCSS、MiniCssExtractPlugin、甚至 css-loader 都有自己的 sourceMap 开关，只要其中一环是 false，最终生成的 map 就会断掉。
排查路径：
-
css-loader的options.sourceMap设为true -
MiniCssExtractPlugin的options.sourceMap也设为true -
postcss.config.js不需要额外配，cssnano会自动继承输入的 map - 如果用了
devtool: 'source-map'，确认没和MiniCssExtractPlugin的 sourceMap 冲突（后者优先级更高）
真正难搞的是多层 PostCSS 插件嵌套时的 map 透传——比如加了 postcss-import，就得确保它的 resolve 不破坏原始路径映射。这种细节没报错，但改一行样式却定位不到源文件，最容易被忽略。
