Skip to main content
CSSNano

让网站的 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)功能, 其中包含了可用于最大化压缩的技术。有关更多详细情况,请参阅我们的 优化 指南。

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

功能特色

基于 PostCSS

基于 PostCSS

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

30+ 插件

30+ 插件

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

可配置

可配置

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

Technology

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