React 插件#

React 插件提供了对 React 功能的支持，插件内部集成了 React Refresh 等功能。

快速开始#

安装插件#

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

npm add @rsbuild/plugin-react -D

注册插件#

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

import { pluginReact } from '@rsbuild/plugin-react';

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

注册完插件后，你可以直接进行 React 开发。

组件库按需引入#

React 组件库的按需引入能力来自 source.transformImport。

当项目中安装了 Ant Design 组件库 <= 4.x 版本时，Rsbuild 会自动添加按需引入能力，默认配置如下：

const defaultAntdConfig = {
  libraryName: 'antd',
  libraryDirectory: isServer ? 'lib' : 'es',
  style: true,
};

当项目中安装了 Arco Design 组件库 时，Rsbuild 会自动添加按需引入能力，默认配置如下：

const defaultArcoConfig = [
  {
    libraryName: '@arco-design/web-react',
    libraryDirectory: isServer ? 'lib' : 'es',
    camelToDashComponentName: false,
    style: true,
  },
  {
    libraryName: '@arco-design/web-react/icon',
    libraryDirectory: isServer ? 'react-icon-cjs' : 'react-icon',
    camelToDashComponentName: false,
  },
];

选项#

splitChunks#

在 chunkSplit.strategy 设置为 split-by-experience 时，Rsbuild 默认会自动将 react 和 router 相关的包拆分为单独的 chunk:

• lib-react.js：包含 react，react-dom，以及 react 的子依赖（scheduler）。
• lib-router.js：包含 react-router，react-router-dom，以及 react-router 的子依赖（history，@remix-run/router）。

该选项用于控制这一行为，决定是否需要将 react 和 router 相关的包拆分为单独的 chunk。

• 类型：

type SplitReactChunkOptions = {
  react?: boolean;
  router?: boolean;
};

• 默认值：

const defaultOptions = {
  react: true,
  router: true,
};

• 示例：

pluginReact({
  splitChunks: {
    react: false,
    router: false,
  },
});