cssnano 能做什么？

cssnano 能为你的 CSS 文件做多方面的的优化，以确保最终生成的文件对生产环境来说体积是最小的。

输入
输出

/* normalize selectors */
h1::before, h1:before {
    /* reduce shorthand even further */
    margin: 10px 20px 10px 20px;
    /* reduce color values */
    color: #ff0000;
    /* remove duplicated properties */
    font-weight: 400;
    font-weight: 400;
    /* reduce position values */
    background-position: bottom right;
    /* normalize wrapping quotes */
    quotes: '«' "»";
    /* reduce gradient parameters */
    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
    /* replace initial values */
    min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";

@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}

上述 CSS 代码片段在保持语义不变的情况下，多余的空白被删除、标识符被压缩，并且清理了没用的 CSS 代码。

从而为生产环境提供了最精简的 CSS 代码。但是耳听为虚，眼见为实。你可以通过 css-size 工具来验证 cssnano 的实际效果。 css-size 是一个专门用于对比 CSS 压缩前后尺寸变化的模块。

默认情况下，cssnano 对你的 CSS 文件执行的是安全优化，但是我们还提供了高级预设（preset）功能，其中包含了可用于最大化压缩的技术。有关更多详细情况，请参阅我们的优化指南。

原始文件（经 gzip 压缩）	325 B
缩减（Minified）之后（经 gzip 压缩）	177 B
相差	148 B
百分比	54.46%

功能特色

基于 PostCSS

CSSNANO 是构建于 postcss 的插件和生态之上的

30+ 插件

CSSNANO 拥有 30 多个插件用以优化你的 css 代码

可配置

CSSNANO 通过预设（presets）来支持自定义配置，便于更好地控制优化等级

Technology

cssnano 是基于 PostCSS 构建的。PostCSS 是一个利用 JavaScript 转换 CSS 样式表的工具。具体来说，PostCSS 的插件架构赋予我们利用多个单一功能的小模块组成 cssnano 的能力。 PostCSS 还允许我们轻松地将 cssnano 加入到你的构建流程中，与其它处理工具协同工作，例如代码过滤工具、语法转换工具等。