高级转换

什么是高级转换？

某些优化并不适用于所有用例；与我们默认捆绑的优化不同，高级转换都具有一定的风险。对于每种类型的转换，我们都记录了它必须对您的 CSS 做出的假设才能保证转换安全。这些转换中的大多数都属于以下一种或两种类别。

假设串联

此转换假设通过 cssnano 传递的 CSS 是网站运行所需的所有内容；它不会从任何其他来源导入资源。如果以某种方式与第三方样式交互的样式，或者您使用多个样式表而不是将它们串联起来，或者通过 JavaScript 注入 CSS，则这可能会出现问题。

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

更改语义

此转换从语义上更改 CSS；它可能会根据 CSS 的某些特征删除样式，或者它可能会更新值以使 CSS 整体变小。根据转换的确切作用，这可能会不受欢迎，因为它可能会在某些用例中更改您网站的外观。

一个很好的例子是 autoprefixer；此转换通过删除过时的供应商前缀来更改 CSS 语义。为了使此转换安全，您的 browserslist 配置必须反映您的网站选择支持的浏览器。

使用高级转换

高级转换默认情况下不与 cssnano 捆绑在一起，因此您需要在 cssnano 旁边安装预设

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

然后，您可以使用 我们的预设指南 中提到的任何技术来加载它。例如，使用 package.json

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

您对高级转换有什么想法吗？

我们是否错失了进一步压缩 CSS 的机会？您可以在我们的下一指南中了解 如何做出贡献。

上次更新于 2024 年 6 月 5 日星期三，格林尼治标准时间 10:27:34