它的作用

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，可用于生产。

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

功能

基于 PostCSS

CSSNANO 构建在 postcss 插件和环境之上

30 多个插件

CSSNANO 有 30 多个插件，用于优化您的 css

可配置

CSSNANO 支持使用预设自定义配置，这些预设控制优化级别

技术

cssnano 由 PostCSS 提供支持，PostCSS 是一款用于使用 JavaScript 转换样式的工具。具体来说，它的插件架构允许我们通过具有有限职责的小模块来构建 cssnano。它还允许您轻松地将 cssnano 插入到构建步骤中，以及其他可以检查 CSS 错误或转换未来语法的处理器。