跳到主要内容

高级转换

什么是高级转换(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 代码上有更好的建议?您可以在下一章节中了解 如何帮我们改进