React Plugin#

The React plugin provides support for React features. The plugin internally integrates features such as React Refresh.

Quick Start#

Install Plugin#

You can install the plugin using the following command:

npm add @rsbuild/plugin-react -D

Register Plugin#

You can register the plugin in the rsbuild.config.ts file:

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

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

After registering the plugin, you can directly develop React.

Import component library on demand#

The on-demand import capability of the React component library comes from source.transformImport.

When the Ant Design component library <= 4.x version is installed in the project, Rsbuild will automatically add on-demand import capabilities, and the default configuration is as follows:

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

When the Arco Design component library is installed in the project, Rsbuild will automatically add on-demand import capabilities, and the default configuration is as follows:

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,
  },
];

Options#

splitChunks#

When chunkSplit.strategy set to split-by-experience, Rsbuild will automatically split react and router related packages into separate chunks by default:

• lib-react.js: includes react, react-dom, and react's sub-dependencies (scheduler).
• lib-router.js: includes react-router, react-router-dom, and react-router's sub-dependencies (history, @remix-run/router).

This option is used to control this behavior and determine whether the react and router related packages need to be split into separate chunks.

• Type:

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

• Default:

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

• Example:

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