close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献
简体中文

LightningCssMinimizerRspackPlugin

Rspack only

此插件使用 lightningcss 来压缩 CSS 产物。参见 optimization.minimizer。

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

Options

include

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

使用此选项来指定应该被压缩的文件，匹配产物文件的路径。

exclude

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

使用此选项来指定应该排除在压缩之外的文件，匹配产物文件的路径。

test

  • Type: string | RegExp | (string | RegExp)[]
  • Default: undefined

使用此选项设置一个模式来匹配 CSS 文件。如果产物文件的路径能匹配给定模式，它将被压缩，否则将不会被压缩。

removeUnusedLocalIdents

  • 类型： boolean
  • 默认值： true

是否自动移除未使用的 CSS Modules 的本地标识符，包括未使用的 CSS 类名、id 和 @keyframe 名称。这些声明将被移除。

比如以下 CSS Modules，导出了类名 a 和类名 b，但只在 js 文件中使用了类名 a：

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，在 minimize 时会将 CSS 产物中类名 b 的声明一并删除，得到以下最终产物：

.a{color: red}

minimizerOptions

传给 Lightning CSS 进行压缩的配置。

以下是支持的配置，其中 targets 配置为 browserslist 查询字符串，其他配置的详细解释请查看 lightningcss 文档

INFO
  1. 默认 targets 为 "fully supports es6"，以保证压缩后不会出现高级语法导致浏览器不兼容（压缩过程中可能会出现由于高级语法更短而将低级语法转为高级语法）。
  2. exclude 选项默认配置了所有的 features。我们通常会在builtin:lightningcss-loader 或其他 loaders 中进行语法降级，所以此插件默认 exclude 所有的 features，避免在 minimize 过程中进行语法降级。

我们建议并鼓励用户配置自己所需的 targets，以获得最好的压缩效果。 

type LightningCssMinimizerOptions = {
  errorRecovery?: boolean;
  targets?: string[] | string;
  include?: LightningcssFeatureOptions;
  exclude?: LightningcssFeatureOptions;
  draft?: Drafts;
  nonStandard?: NonStandard;
  pseudoClasses?: PseudoClasses;
  unusedSymbols?: 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;
};