CSS Minimizer 插件

Rsbuild 默认使用 Rspack 内置的 SWC 来压缩 CSS 代码,你可以通过 CSS Minimizer 插件来自定义 CSS 压缩工具,切换到 cssnano 或其他工具进行 CSS 压缩。

CSS Minimizer 插件内部集成了 css-minimizer-webpack-plugin

关于 cssnano

cssnano 是一个用于优化和压缩 CSS 文件的工具。它通过删除未使用的规则、合并相同的规则、移除注释和空白符以及转换长度单位等方式来减小 CSS 文件的体积,从而提升网站的加载速度。

快速开始

安装插件

你可以通过如下的命令安装插件:

npm
yarn
pnpm
bun
npm add @rsbuild/plugin-css-minimizer -D

注册插件

你可以在 rsbuild.config.ts 文件中注册插件:

rsbuild.config.ts
import { pluginCssMinimizer } from '@rsbuild/plugin-css-minimizer';

export default {
  plugins: [pluginCssMinimizer()],
};

选项

pluginOptions

用于自定义 css-minimizer-webpack-plugin 的选项。

pluginOptions 的值会与插件内部的默认选项通过 Object.assign 合并,然后透传给 css-minimizer-webpack-plugin 插件。你可以阅读 css-minimizer-webpack-plugin 的 README 文档 来了解所有可用的选项。

  • 类型: Object | Function | undefined
  • 默认值:
const defaultOptions = {
  minimizerOptions: {
    preset: [
      'default',
      {
        mergeLonghand: false,
      },
    ],
  },
};
  • 示例一: 修改 cssnanopreset 配置。
pluginCssMinimizer({
  pluginOptions: {
    minimizerOptions: {
      preset: require.resolve('cssnano-preset-simple'),
    },
  },
});
  • 示例二: 传入一个函数来修改默认选项。
pluginCssMinimizer({
  pluginOptions: (options) => {
    options.minimizerOptions = {
      preset: require.resolve('cssnano-preset-simple'),
    };
  },
});