CSS Minimizer 插件#

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

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

快速开始#

安装插件#

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

npm add @rsbuild/plugin-css-minimizer -D

注册插件#

你可以在 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,
      },
    ],
  },
};

• 示例一： 修改 cssnano 的 preset 配置。

pluginCssMinimizer({
  pluginOptions: {
    minimizerOptions: {
      preset: require.resolve('cssnano-preset-simple'),
    },
  },
});

• 示例二： 传入一个函数来修改默认选项。

pluginCssMinimizer({
  pluginOptions: (options) => {
    options.minimizerOptions = {
      preset: require.resolve('cssnano-preset-simple'),
    };
  },
});