cssnano 基于 PostCSS，把压缩拆成几十个各司其职的小插件：去掉注释与空白、把 #ffffff 缩成 #fff、合并重复的选择器与媒体查询、把 0px 优化为 0、压缩 font-weight 数值等，全部按需启用。在生产构建里它负责最后一公里，通常与 Autoprefixer 串联使用，大型样式表的压缩率相当可观。
它提供 default、lite、advanced 等预设，advanced 会开启更激进的重排（比如合并相邻媒体查询、重排规则顺序），有极小概率改变层叠顺序，上线前需要回归验收。正确的姿势是把它放在 PostCSS 流水线最后执行，并保留 source map，这样线上排查问题时还能还原到压缩前的原始位置。
<!-- 压缩前 --> <!-- .box { background-color: #ffffff; margin: 0px; padding: 10px 10px; } cssnano 压缩后（单行）： .box{background-color:#fff;margin:0;padding:10px} -->