LightningCssMinimizerRspackPlugin

Rspack 專用

此插件使用 lightningcss 來最小化 CSS 資源。請參閱 optimization.minimizer。

module.exports = {
  // ...
  optimization: {
    minimizer: [new rspack.LightningCssMinimizerRspackPlugin(options)],
  },
};

選項

include

類型: string | RegExp | (string | RegExp)[]
預設值: undefined

使用此選項指定應最小化的檔案，它會比對輸出檔案的路徑。

exclude

類型: string | RegExp | (string | RegExp)[]
預設值: undefined

使用此選項指定應排除最小化的檔案，它會比對輸出檔案的路徑。

test

類型: string | RegExp | (string | RegExp)[]
預設值: undefined

使用此選項提供一個模式，用於比對 CSS 檔案。如果輸出檔名符合給定的模式，則將其最小化，否則不會。

removeUnusedLocalIdents

類型: boolean
預設值: true

是否自動移除 CSS Modules 中未使用的本地識別符，包括未使用的 CSS 類別名稱、ID 和 @keyframe 名稱。這些宣告將被移除。

例如，在以下 CSS Modules 中，類別名稱 a 和 b 已匯出，但只有類別名稱 a 在 js 檔案中使用

index.module.css

.a {
  color: red;
}

.b {
  color: blue;
}

index.js

import * as styles from './index.module.css';
document.body.className = styles.a;

此時，將透過 Rspack 的 tree shaking 功能取得類別名稱 b 未使用的資訊，並提供給 lightningcss。在最小化期間，類別名稱 b 的宣告將從 CSS 輸出中移除，產生以下最終輸出

.a{color: red}

minimizerOptions

傳遞給 Lightning CSS 以進行最小化的設定。

以下是支援的設定，targets 設定是純粹的 browserslist 查詢，其他詳細用法請參閱 Lightning CSS 文件

資訊

預設的 targets 設定為 "fully supports es6"，以確保最小化不會引入可能導致瀏覽器不相容的進階語法 (最小化可能會將較低階的語法轉換為進階語法，因為它更短)。
exclude 選項預設設定為所有功能。我們通常在 builtin:lightningcss-loader 或其他 loaders 中進行語法降級，因此此插件預設排除所有功能，以避免在最小化過程中發生語法降級。

我們建議並鼓勵使用者設定自己的 targets，以達到最佳的最小化效果。

type LightningCssMinimizerOptions = {
  errorRecovery?: boolean;
  targets?: string[] | string;
  include?: LightningcssFeatureOptions;
  exclude?: LightningcssFeatureOptions;
  draft?: Drafts;
  nonStandard?: NonStandard;
  pseudoClasses?: PseudoClasses;
  unusedSymbols?: Set<String>;
};

type LightningcssFeatureOptions = {
  nesting?: boolean;
  notSelectorList?: boolean;
  dirSelector?: boolean;
  langSelectorList?: boolean;
  isSelector?: boolean;
  textDecorationThicknessPercent?: boolean;
  mediaIntervalSyntax?: boolean;
  mediaRangeSyntax?: boolean;
  customMediaQueries?: boolean;
  clampFunction?: boolean;
  colorFunction?: boolean;
  oklabColors?: boolean;
  labColors?: boolean;
  p3Colors?: boolean;
  hexAlphaColors?: boolean;
  spaceSeparatedColorNotation?: boolean;
  fontFamilySystemUi?: boolean;
  doublePositionGradients?: boolean;
  vendorPrefixes?: boolean;
  logicalProperties?: boolean;
  selectors?: boolean;
  mediaQueries?: boolean;
  color?: boolean;
};

本頁內容

LightningCssMinimizerRspackPlugin#

選項#

include#

exclude#

test#

removeUnusedLocalIdents#