简介

什么是缩减(minification)?

缩减(minification)是指利用各种方法来 减少代码体积的过程。和 gzip 之类的保留 CSS 文件的原始语义(即无损失)的技术不同,缩减(minification) 天生是一个有损失的过程,例如,其中某些值可能会被替换为更简化的 等价语法,或者选择器被合并。

缩减(minification)步骤的最终结果是生成的代码将与 原始代码行为相同,但是某些部分被修改以 尽可能减少代码体积。

将 gzip 压缩和缩减(minification)相结合,可以最大限度的减少 文件体积,但是不要耳听为虚、眼见为实,为什么不去试试 css-size ? css-size 是一个专门对比缩减(minification)前后文件体积大小变化的模块。

cssnano 是什么?

cssnano 就是这样的一个缩减器,它使基于 Node.js 开发的。cssnano 是一个 PostCSS 插件,可以添加到你的构建流程中,用于确保最终生成的 用于生产环境的 CSS 样式表文件尽可能的小。

如果你不了解什么是构建流程,没关系,我们在 入门指南 中做了讲解。

这对我有什么好处?

大量的代码优化

我们提供了众多不同的优化,从简单的 清除空白符到复杂的不同名称的同一 keyframes 的合并等。 更多信息请参考 预设指南

统一的 CSS 处理

cssnano 基于 PostCSS 来处理 CSS 代码。因为很多 现代化的 CSS 工具都是基于 PostCSS 开发的,因此你可以把这些工具组合起来 并生成一棵单一的抽象语法树(AST)。这就意味着总的处理时间 减少了,因为 CSS 不再需要进行多次解析了。

现代化的架构以及模块化

因为 cssnano 是基于 PostCSS 的,因此我们可以将 cssnano 的功能拆解为多个 插件,每个插件只需负责执行一项小的优化即可。并且许多优化可以限定 到某一组特定的 CSS 属性上,这就比利用正则表达式对 CSS 做全局处理更加安全。

接下来是

入门