feat(plugin-react): enable support for profiling React in prod env (#2143)

Author: denniscual

e2e/cases/react/enable-profiler/index.test.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test';
+import { build, gotoPage } from '@e2e/helper';
+
+const fixtures = __dirname;
+
+test('should render element with enabled profiler correctly', async ({
+  page,
+}) => {
+  const rsbuild = await build({
+    cwd: fixtures,
+    runServer: true,
+  });
+
+  await gotoPage(page, rsbuild);
+
+  const testEl = page.locator('#test');
+  await expect(testEl).toHaveText('Hello Rsbuild!');
+
+  await rsbuild.close();
+});

e2e/cases/react/enable-profiler/rsbuild.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  plugins: [
+    pluginReact({
+      enableProfiler: true,
+    }),
+  ],
+});

e2e/cases/react/enable-profiler/src/App.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const App = () => <div id="test">Hello Rsbuild!</div>;
+
+export default App;

e2e/cases/react/enable-profiler/src/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(React.createElement(App));
+}

packages/plugin-react/src/index.ts

@@ -1,7 +1,8 @@
 import type { RsbuildPlugin } from '@rsbuild/core';
 import type { SwcReactConfig } from '@rsbuild/shared';
 import { applySplitChunksRule } from './splitChunks';
-import { applyBasicReactSupport } from './react';
+import { applyBasicReactSupport, applyReactProfiler } from './react';
+import { getNodeEnv } from '@rsbuild/shared';
 
 export type SplitReactChunkOptions = {
   /**
@@ -28,18 +29,26 @@ export type PluginReactOptions = {
    * Configuration for chunk splitting of React-related dependencies.
    */
   splitChunks?: SplitReactChunkOptions;
+  enableProfiler?: boolean;
 };
 
 export const PLUGIN_REACT_NAME = 'rsbuild:react';
 
-export const pluginReact = (
-  options: PluginReactOptions = {},
-): RsbuildPlugin => ({
+export const pluginReact = ({
+  enableProfiler = false,
+  ...options
+}: PluginReactOptions = {}): RsbuildPlugin => ({
   name: PLUGIN_REACT_NAME,
 
   setup(api) {
+    const isEnvProductionProfile =
+      enableProfiler && getNodeEnv() === 'production';
     if (api.context.bundlerType === 'rspack') {
       applyBasicReactSupport(api, options);
+
+      if (isEnvProductionProfile) {
+        applyReactProfiler(api);
+      }
     }
 
     applySplitChunksRule(api, options?.splitChunks);

packages/plugin-react/src/react.ts

@@ -5,7 +5,7 @@ import {
   modifySwcLoaderOptions,
   type SwcReactConfig,
 } from '@rsbuild/shared';
-import type { RsbuildPluginAPI } from '@rsbuild/core';
+import type { RsbuildConfig, RsbuildPluginAPI } from '@rsbuild/core';
 import type { PluginReactOptions } from '.';
 
 export const applyBasicReactSupport = (
@@ -52,3 +52,29 @@ export const applyBasicReactSupport = (
       .use(ReactRefreshRspackPlugin, [{ include: [SCRIPT_REGEX] }]);
   });
 };
+
+export const applyReactProfiler = (api: RsbuildPluginAPI) => {
+  api.modifyRsbuildConfig((config, { mergeRsbuildConfig }) => {
+    const enableProfilerConfig: RsbuildConfig = {
+      output: {
+        minify: {
+          jsOptions: {
+            // Need to keep classnames and function names like Components for debugging purposes.
+            mangle: {
+              keep_classnames: true,
+              keep_fnames: true,
+            },
+          },
+        },
+      },
+    };
+    return mergeRsbuildConfig(config, enableProfilerConfig);
+  });
+
+  api.modifyBundlerChain((chain) => {
+    // Replace react-dom with the profiling version.
+    // Reference: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977
+    chain.resolve.alias.set('react-dom$', 'react-dom/profiling');
+    chain.resolve.alias.set('scheduler/tracing', 'scheduler/tracing-profiling');
+  });
+};

website/docs/en/plugins/list/plugin-react.mdx

@@ -145,3 +145,20 @@ pluginReact({
   },
 });
 ```
+
+### enableProfiler
+
+When set to true, enables the React Profiler for performance analysis in production builds. Use the React DevTools to examine profiling results and identify potential performance optimizations. Profiling adds a slight overhead, so it's disabled by default in production environments.
+
+```ts title="rsbuild.config.ts"
+pluginReact({
+  // Only enable the profiler when REACT_PROFILER is true, as the option will increase the build time and adds some small additional overhead.
+  enableProfiler: process.env.REACT_PROFILER === 'true',
+});
+```
+
+Set `REACT_PROFILER` when running build script.
+
+```
+REACT_PROFILER=true npx rsbuild build
+```