cssnano 在前端工程化中的应用
核心结论
cssnano 是一款开源的 CSS 压缩优化工具，核心作用是通过移除冗余代码、精简语法、合并规则等方式，最小化 CSS 文件体积，最终提升网页加载速度（减少网络传输量），是前端工程化中处理 CSS 构建的常用工具。
简单说：它能把 "臃肿" 的手写 / 编译后 CSS 变成 "极简" 版本，且不改变样式的实际表现。
一、cssnano 具体做什么？
它会对 CSS 进行安全且无损（默认）的优化，常见操作包括：
| 优化类型 | 示例（优化前 → 优化后） |
|---|---|
| 移除空白 / 注释 | .nav { margin: 10px; } → .nav{margin:10px;} |
| 精简属性值 | margin: 10px 20px 10px 20px; → margin:10px 20px; color: #ffffff; → color:#fff; |
| 合并重复规则 | .box{color:red;} .box{font-size:14px;} → .box{color:red;font-size:14px;} |
| 移除无效代码 | .box{width: 100%; width: auto;} → .box{width:auto;} |
| 降级兼容（可选） | 自动处理浏览器前缀（如配合 autoprefixer），移除冗余前缀 |
| 压缩选择器 | （进阶）配合 CSS Modules 可精简选择器名称（非默认） |
⚠️ 关键：默认开启 "无损优化"，不会改变 CSS 样式的渲染效果；也可配置 "有损优化"（如合并媒体查询、精简 calc 表达式），进一步压缩体积。
二、cssnano 怎么用？
它很少单独使用，通常集成在前端构建工具中，常见场景：
-
配合 PostCSS（最主流）
作为 PostCSS 插件配置，比如在
postcss.config.js中：module.exports = {
plugins: [
require('autoprefixer'), // 自动加前缀
require('cssnano')({ // 压缩 CSS
preset: 'default' // 默认优化预设
})
]
}; -
配合 webpack/vite 等构建工具
-
webpack：通过
mini-css-extract-plugin+css-loader+ postcss 集成； -
vite：内置对 PostCSS 的支持，只需在
postcss.config.js中配置即可。
-
CLI 命令行（临时使用）
安装后直接压缩单个文件
npx cssnano input.css output.min.css
三、为什么要用 cssnano？
-
性能优化：压缩后的 CSS 文件更小，网页加载更快（尤其移动端 / 低网速场景）；
-
工程化标配：与 PostCSS、webpack 等生态无缝衔接，是前端打包的 "标配步骤"；
-
安全可控：默认不破坏样式，可通过配置自定义优化规则（比如保留特定注释、禁用某些压缩项）；
-
兼容性好：支持最新 CSS 语法，也能适配老旧浏览器的前缀处理。
四、注意事项
-
需先编译预处理 CSS（Less/Sass/Stylus）：cssnano 只处理原生 CSS，需先把 Less/Sass 编译为 CSS 再压缩；
-
避免重复压缩：若构建流程中已有其他 CSS 压缩工具（如
csso），无需重复使用； -
调试时关闭：开发环境建议禁用 cssnano，保留原始 CSS 便于调试；生产环境开启即可。