進階轉換

什麼是進階轉換？

某些最佳化並不適用於所有情況；與我們預設捆綁的那些不同，進階轉換都帶有一定程度的風險。對於每種類型的轉換，我們都記錄了它必須對您的 CSS 做出的假設，才能確保轉換的安全性。這些轉換大多屬於以下一種類型或兩種。

假設串接

此轉換假設通過 cssnano 的 CSS 是網站運行所需的全部 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 GMT