Skip to main content

高级转换

什么是高级转换（advanced transform）？​

某些优化并不适用于所有使用场景，与那些 默认打包不同，高级转换（advanced transform）都有一定的风险。 为了确保转换（transform）的安全， 对你的 CSS 做了必要的假设，我们对这些假设也做了详细说明。这些转换中的大多数 可以归入以下一个或两个分类中。

假定文件合并为一个​

此类转换假定传递给 cssnano 的 CSS 是支持网站运行所需要的全部 CSS， 即，它不需要依赖任何第三方的资源。 如果你所书写的样式代码与第三方样式有依赖关系， 或者你使用的是多个样式表而不是将这些样式表合并为一个， 或者你正在通过 JavaScript 注入 CSS，那么这种转换就 可能 引发问题。

一个很好的例子是 postcss-merge-idents，为了使这个转换变得安全， 任何使用它们的 @keyframes 规则和选择器都必须在同一个文件中。

更改语义​

这种转换从语义上改变了 CSS，它可以根据 CSS 的某些 特性删除样式代码，或者更新某些样式的值以便让 CSS 体积变得更小。 根据实际所用的转换，这中更改 可能 不受欢迎， 因为它可能会在某些使用场景中修改网站的展示效果。

一个很好的例子时 autoprefixer，这个转换通过 删除陈旧的带有特定厂商前缀的属性从而修改了 CSS 语义。为了保证转换的安全， 你的 browserslist 配置必须反映出你的站点所 选择支持的浏览器。

使用高级转换（advanced transform）​

默认情况下，高级转换不会与 cssnano 捆绑在一起的，因此你需要 在安装 cssnano 时一同安装相应的预设（preset）：

npm install cssnano-preset-advanced --save-dev

然后你就可以使用 预设（preset）指南中提到的任何技术来加载它了。例如，通过 package.json：

{
  "name": "awesome-application",
  "cssnano": {
    "preset": "advanced"
  }
}

你对高级转换（advanced transform）有什么建议吗？​

您是否在压缩 CSS 代码上有更好的建议？您可以在下一章节中了解 如何帮我们改进。