高级转换

什么是高级转换(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)有什么建议吗?

我们是否还有什么需要改进的地方吗?你可以在下一讲解中了解 如何贡献