简体中文

CSS Minimizer 插件

Source

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 = {
  minify: CssMinimizerWebpackPlugin.cssnanoMinify,
  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'),
    };
  },
});

示例三： 切换到其他工具进行 CSS 压缩

import {
  pluginCssMinimizer,
  CssMinimizerWebpackPlugin,
} from '@rsbuild/plugin-css-minimizer';

pluginCssMinimizer({
  pluginOptions: {
    minify: CssMinimizerWebpackPlugin.cleanCssMinify,
    minimizerOptions: {
      level: {
        1: {
          roundingPrecision: "all=3,px=5",
        },
      },
    },
  },
}),

CSS Minimizer 插件#

快速开始#

安装插件#

注册插件#

选项#

pluginOptions#

CSS Minimizer 插件

快速开始

安装插件

注册插件

选项

pluginOptions