cssnano需置于autoprefixer等转换插件之后，v6+须用cssnano-preset-default显式配置，生产环境通过node_env控制启用，开发环境禁用以防hmr变慢；vite需在vite.config.ts中配置，webpack注意避免与css-loader minimize重复压缩。
postcss.config.js 里怎么配 cssnano 才不报错
直接在 postcss.config.js 中启用 cssnano 却没生效，大概率是插件顺序或版本冲突导致的。PostCSS 插件执行顺序很关键：cssnano 必须放在所有转换类插件（比如 autoprefixer、postcss-preset-env）之后，否则压缩可能误删尚未生成的兼容性代码。
常见错误现象：Invalid CSS after "..." 或压缩后 @supports 消失、rem 单位被错误转成 px。
- 用
cssnano@6+时，必须通过cssnano-preset-default显式配置，不能直接传{} - 避免和
optimize-css-assets-webpack-plugin同时启用 —— 二者都压缩 CSS 会重复处理，导致属性丢失 - Webpack 5+ 用户注意：
css-loader默认已开启minimize，若再手动加cssnano就会叠加载入两次
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({
preset: ['default', {
discardComments: { removeAll: true },
mergeLonghand: false // 防止 margin 合并出错
}]
})
]
}
为什么开发环境开了 cssnano 会热更新变慢
cssnano 默认启用大量优化规则（如 colormin、postcss-discard-duplicates），每次保存都全量解析 + 压缩，对大项目明显拖慢 HMR。
使用场景：仅构建生产包时启用压缩，开发阶段应跳过。
- 用环境变量控制：
process.env.NODE_ENV === 'production'再加载cssnano - 别在
postcss.config.js顶层直接require('cssnano')，改用函数式导出动态判断 - Webpack 用户可改用
MiniCssExtractPlugin.loader的minimize选项，由它内部调用更轻量的压缩逻辑
cssnano 压缩后字体图标或伪元素样式消失
这是 cssnano 默认启用 discardEmpty 和 reduceTransforms 导致的典型副作用：它会删掉空规则、合并看似重复的 ::before/::after，但某些图标字体依赖空内容或特定 transform 顺序。
参数差异：v5 和 v6 的默认 preset 差异很大，v6 更激进。
- 显式关闭危险项：
discardEmpty: false、reduceTransforms: false - 若用字体图标（如 Font Awesome），加上
normalizeWhitespace: false避免删掉content: " "类空格 - 检查是否误启用了
mergeRules—— 它可能把不同选择器下的font-family合并，破坏图标字体 fallback 链
Webpack 与 Vite 下 cssnano 配置写法差异
不是所有构建工具都走 PostCSS 流程；Vite 2.9+ 默认用 esbuild 处理 CSS，postcss.config.js 不生效，必须显式启用 PostCSS 支持。
性能影响：Vite 开发模式下即使配了 cssnano，也不会运行（除非强制开 build.cssMinify: 'none' 再手动介入）；而 Webpack 生产模式默认就走一遍。
- Vite 需在
vite.config.ts中写：css: { postcss: { plugins: [require('cssnano')(...)] } } - Webpack 要确保
css-loader的options.modules和cssnano的preset兼容，否则局部作用域类名可能被误删 - Next.js 13+ 使用 app dir 时，
postcss.config.js仍有效，但cssnano仅作用于全局 CSS，不处理module.css
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
