LightningCssMinimizerRspackPlugin

Rspack only

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

示例

rspack.config.mjs

import { rspack } from '@rspack/core';

export default {
  optimization: {
    minimizer: [new rspack.LightningCssMinimizerRspackPlugin()],
  },
};

选项

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

插件按以下顺序确定 targets：
- 优先使用显式配置的 minimizerOptions.targets。
- 未配置时，继承 Rspack 的 target 提供的目标信息，只保留支持的浏览器。如果目标中不包含支持的浏览器（如 browserslist:node 18），则使用空目标。
- 如果 Rspack 未提供目标信息（如 web），则默认使用 "fully supports es6"。
为了减小体积，Lightning CSS 在压缩时可能会改用更短的新语法。这个默认值限定了可以使用的语法范围，让压缩后的代码也能兼容上述浏览器。
exclude 选项默认配置了所有的 features。我们通常会在 builtin:lightningcss-loader 或其他 loaders 中进行语法降级，所以此插件默认 exclude 所有的 features，避免在 minimize 过程中进行语法降级。

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

type Targets = {
  android?: string;
  chrome?: string;
  edge?: string;
  firefox?: string;
  ie?: string;
  ios_saf?: string;
  opera?: string;
  safari?: string;
  samsung?: string;
};

type LightningCssMinimizerOptions = {
  errorRecovery?: boolean;
  targets?: string[] | string | Targets;
  include?: LightningcssFeatureOptions;
  exclude?: LightningcssFeatureOptions;
  drafts?: 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;
};

#LightningCssMinimizerRspackPlugin

#示例

#选项

#include

#exclude

#test

#removeUnusedLocalIdents

#minimizerOptions