CSS 构建工具链深度解析：PostCSS、Autoprefixer、cssnano 与 PurifyCSS

在现代前端工程化流程中，CSS 的处理已远不止编写样式那么简单。postcss、autoprefixer、cssnano 和 purify-css 是构建高性能、兼容性强且体积精简的 CSS 资产的关键工具。它们各自解决不同层面的问题，且常被组合使用。本文将从实际工程角度剖析它们的核心职责、协作方式及选型考量。

🧱 核心角色定位：谁负责什么？

postcss：CSS 的“编译器”骨架

postcss 本身不直接修改 CSS，而是一个用 JavaScript 插件转换 CSS 的工具平台。它解析 CSS 成抽象语法树（AST），允许插件读取、修改或生成新规则，最后再序列化回 CSS 字符串。几乎所有现代 CSS 工具（包括下面三者）都基于 PostCSS 构建。

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')
  ]
};

autoprefixer：自动补全浏览器前缀

autoprefixer 是一个 PostCSS 插件，根据 Can I Use 数据库和你指定的浏览器范围，自动为 CSS 规则添加 -webkit-、-moz- 等厂商前缀。开发者只需写标准 CSS，无需记忆哪些属性需要前缀。

// 输入 CSS
const input = 'body { display: flex; }';

// autoprefixer 处理后（假设目标包含旧版 Safari）
// body { display: -webkit-box; display: -ms-flexbox; display: flex; }

cssnano：极致压缩与优化

cssnano 也是一个 PostCSS 插件，专注于减小 CSS 文件体积。它执行一系列优化，如删除注释、合并重复规则、缩短颜色值（#ff0000 → red）、压缩 calc 表达式等。

// 输入 CSS
div { color: #ff0000; margin: 10px 10px 10px 10px; /* comment */ }

// cssnano 压缩后
div{color:red;margin:10px}

purify-css：移除未使用的 CSS（⚠️ 已弃用）

purify-css 曾用于分析 HTML/JS 文件，找出项目中实际使用的 CSS 选择器，并移除其余“死代码”。但该项目自 2018 年起已停止维护，官方 GitHub 仓库明确标记为 deprecated。不应在新项目中使用。推荐替代方案包括 purgecss 或 unocss 等更活跃的工具。

💡 注意：purify-css 不是 PostCSS 插件，需单独集成到构建流程中。

// purify-css（已弃用，仅作历史参考）
const purify = require('purify-css');
purify(['index.html'], ['styles.css'], {
  output: 'purified.css'
});

🔗 协同工作流：典型构建管道

在真实项目中，这些工具通常串联使用。例如，在 Webpack 中通过 postcss-loader 集成：

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                // 先加前缀
                require('autoprefixer'),
                // 再压缩
                require('cssnano')({ preset: 'default' })
              ]
            }
          }
        }
      ]
    }]
  }
};

此流程确保：

1. 开发者写无前缀的标准 CSS；
2. Autoprefixer 按目标浏览器添加必要前缀；
3. cssnano 对最终结果进行体积优化。

⚙️ 配置灵活性与控制粒度

postcss：插件生态的中枢

PostCSS 的强大在于其插件体系。除了 autoprefixer 和 cssnano，你还可以集成：

• postcss-preset-env：使用未来的 CSS 语法（如嵌套、自定义媒体查询）
• postcss-modules：实现 CSS 模块化
• tailwindcss：原子化 CSS 框架

// 使用未来 CSS 语法
plugins: [
  require('postcss-preset-env')({ stage: 3 }),
  require('autoprefixer')
]

autoprefixer：精准控制浏览器范围

通过 browserslist 配置（通常在 package.json 或 .browserslistrc 中），可精确指定目标环境，避免不必要的前缀膨胀。

// package.json
"browserslist": ["> 1%", "last 2 versions"]

cssnano：按需启用优化项

cssnano 提供多种预设（default, lite）和细粒度选项，可在压缩率与构建速度间权衡。

// 仅启用安全优化
require('cssnano')({
  preset: ['default', { discardComments: { removeAll: true } }]
})

purify-css：为何被淘汰？

purify-css 存在明显局限：

• 无法处理动态类名（如 class={isActive ? 'active' : ''}）
• 对现代框架（React/Vue）的模板解析支持弱
• 无活跃维护，存在未修复 bug

相比之下，purgecss 通过自定义提取器（extractor）能更好识别动态类名，成为事实标准。

🧪 实际场景选型建议

场景 1：基础项目兼容性处理

• 需求：支持旧版浏览器，自动加前缀
• 方案：postcss + autoprefixer
• 理由：轻量、精准，仅解决前缀问题

场景 2：生产环境极致压缩

• 需求：最小化 CSS 体积
• 方案：在 PostCSS 管道末尾加入 cssnano
• 注意：避免在开发环境启用，影响调试

场景 3：移除未使用样式

• 需求：清理死代码，减小包体积
• 方案：不要用 purify-css，改用 purgecss（可通过 PostCSS 插件 @fullhuman/postcss-purgecss 集成）

// postcss.config.js with purgecss
plugins: [
  require('@fullhuman/postcss-purgecss')({
    content: ['./src/**/*.html', './src/**/*.js']
  })
]

场景 4：现代 CSS 开发体验

• 需求：使用 CSS 嵌套、自定义属性等新特性
• 方案：postcss + postcss-preset-env + autoprefixer
• 优势：无需等待浏览器支持，提前使用未来语法

📌 关键总结

💡 最佳实践

1. 始终通过 PostCSS 统一管理 CSS 转换：避免混用独立工具，保持流程清晰。
2. 明确区分开发与生产配置：开发时禁用 cssnano，保留可读性；生产时启用压缩。
3. 谨慎处理 CSS 清理：若需移除未使用样式，优先选择 purgecss 并配置合适的提取器。
4. 利用 browserslist 统一目标环境：确保 Autoprefixer、Babel 等工具共享同一份浏览器策略。

这些工具共同构成了现代 CSS 工程化的基石。理解它们各自的边界和协作方式，能帮助你在保证兼容性的同时，交付体积更小、性能更优的样式资源。