• 简体中文

      • React Compiler

      React Compiler 是 React 19 引入的一个实验性编译器，它可以自动优化你的 React 代码。

      在开始使用 React Compiler 之前，建议阅读 React Compiler 文档，以了解 React Compiler 的功能、当前状态和使用方法。

      如何使用

      React 19

      如果你使用的是 React 19，Modern.js 已内置支持 React Compiler，无需额外配置即可使用。

      React 18

      如果你使用的是 React 18，需要按照以下步骤配置：

      1. 安装 react-compiler-runtime，以允许编译后的代码在 19 之前的版本上运行：
      npm install react-compiler-runtime
      1. 安装 babel-plugin-react-compiler：
      npm install babel-plugin-react-compiler
      1. 在你的 Modern.js 配置文件中注册 Babel 插件：
      modern.config.ts
      import { appTools, defineConfig } from '@modern-js/app-tools';
import { pluginBabel } from '@rsbuild/plugin-babel';

export default defineConfig({
  builderPlugins: [
    pluginBabel({
      babelLoaderOptions: (config, { addPlugins }) => {
        addPlugins([
          [
            'babel-plugin-react-compiler',
          {
            target: '18', // 或 '17'，根据你使用的 React 版本
          },
          ],
        ]);
      },
    });
  ];
  plugins: [appTools()],
});

      详细代码可以参考：Modern.js & React Compiler 示例项目