让 CSS 样式文件加载速度更快。

将 cssnano 加入到你的构建流程中,获得最好的 CSS 压缩效果。

开始入门

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 压缩前后尺寸变化的模块。

原始 (gzip)325 B
压缩后 (gzip)177 B
差值148 B
压缩比54.46%

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

所用技术

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

postcss-logo-symbol