close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献

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 模块的未使用的本地标识符，包括未使用的 CSS 类名、ID 和 @keyframe 名称。这些的声明将被移除。

例如，在以下 CSS 模块中，类名 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;

此时，类名 b 未使用的信息将通过 Rspack 的 tree shaking 功能获取并提供给 lightningcss。在最小化过程中，类名 b 的声明将从 CSS 输出中移除，最终输出如下

.a{color: red}

minimizerOptions

传递给 Lightning CSS 用于最小化的配置。

以下是支持的配置，targets 配置是简单的 browserslist 查询，其他详细用法请参考 Lightning CSS 文档

INFO
  1. 默认的 targets 设置为 "fully supports es6"，以确保最小化不会引入可能导致浏览器不兼容的语法（最小化可能会将低级语法变成高级语法，因为它更短）。
  2. exclude 选项默认配置了所有功能。我们通常在 builtin:lightningcss-loader 或其他加载器中进行语法降级，因此此插件默认排除所有功能，以避免在最小化过程中进行语法降级。

我们建议并鼓励用户配置自己的 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;
};