跳到主要内容

让 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";

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

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

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

Original (gzip)325 B
Minified (gzip)177 B
Difference148 B
Percent54.46%

功能特色

[object Object]

基于 PostCSS

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

[object Object]

30+ 插件

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

[object Object]

可配置

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

技术原理

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