docs: add react compiler usage docs (#7176)

Author: zllkjc

packages/document/main-doc/docs/en/guides/advanced-features/page-performance/_meta.json

@@ -1 +1 @@
-["code-split", "inline-assets", "optimize-bundle"]
+["code-split", "inline-assets", "optimize-bundle", "react-compiler"]

packages/document/main-doc/docs/en/guides/advanced-features/page-performance/react-compiler.mdx

@@ -0,0 +1,44 @@
+# React Compiler
+
+The React Compiler is an experimental compiler introduced in React 19 that can automatically optimize your React code.
+
+Before starting to use the React Compiler, it is recommended to read the [React Compiler documentation](https://zh-hans.react.dev/learn/react-compiler) to understand its features, current status, and usage.
+
+## How to Use
+
+The steps to use the React Compiler in Modern.js are as follows:
+
+1. Modern.js does not officially support React 19 yet, but you can install `react-compiler-runtime@rc` in React 17 or 18 projects to allow the compiled code to run on versions before 19.
+
+2. Currently, the React Compiler only provides a Babel plugin, so you need to install `babel-plugin-react-compiler`.
+
+3. Register the Babel plugin in your Modern.js configuration file:
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  tools: {
+    babel(_, { addPlugins }) {
+      addPlugins([
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+          },
+        ],
+      ]);
+    },
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+  ],
+});
+```
+
+> For detailed code, you can refer to the [Modern.js & React Compiler example project](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)

packages/document/main-doc/docs/en/guides/basic-features/output-files.mdx

@@ -96,35 +96,6 @@ dist
     └── qux.[hash].mp4
 ```
 
-
-<!-- ## Node.js Output Directory
-
-When you enable SSR or SSG features in Modern.js, Modern.js will generate a Node.js bundle after the build and output it to the `bundles` directory.
-
-```bash
-dist
-├── bundles
-│   └── [name].js
-├── static
-└── html
-```
-
-Node.js files usually only contain JS files, no HTML or CSS. Also, JS file names will not contain hash.
-
-You can modify the output path of Node.js files through the [output.distPath.server](/configure/app/output/dist-path) config.
-
-For example, output Node.js files to the `server` directory:
-
-```ts
-export default {
-  output: {
-    distPath: {
-      server: 'server',
-    },
-  },
-};
-``` -->
-
 ## Flatten the Directory
 
 Sometimes you don't want the dist directory to have too many levels, you can set the directory to an empty string to flatten the generated directory.

packages/document/main-doc/docs/zh/guides/advanced-features/page-performance/_meta.json

@@ -1 +1 @@
-["code-split", "inline-assets", "optimize-bundle"]
+["code-split", "inline-assets", "optimize-bundle", "react-compiler"]

packages/document/main-doc/docs/zh/guides/advanced-features/page-performance/react-compiler.mdx

@@ -0,0 +1,44 @@
+# React Compiler
+
+React Compiler 是 React 19 引入的一个实验性编译器，它可以自动优化你的 React 代码。
+
+在开始使用 React Compiler 之前，建议阅读 [React Compiler 文档](https://zh-hans.react.dev/learn/react-compiler)，以了解 React Compiler 的功能、当前状态和使用方法。
+
+## 如何使用
+
+在 Modern.js 中使用 React Compiler 的步骤如下：
+
+1. Modern.js 目前项目还未正式支持 React 19，可以在 React 17 或 18 项目中安装 `react-compiler-runtime@rc`，以允许编译后的代码在 19 之前的版本上运行。
+
+2. 目前 React Compiler 仅提供了 Babel 插件，你需要安装 `babel-plugin-react-compiler`。
+
+3. 在你的 Modern.js 配置文件中注册 Babel 插件：
+
+```ts title="modern.config.ts"
+import { appTools, defineConfig } from '@modern-js/app-tools';
+
+export default defineConfig({
+  runtime: {
+    router: true,
+  },
+  tools: {
+    babel(_, { addPlugins }) {
+      addPlugins([
+        [
+          'babel-plugin-react-compiler',
+          {
+            target: '18',
+          },
+        ],
+      ]);
+    },
+  },
+  plugins: [
+    appTools({
+      bundler: 'rspack',
+    }),
+  ],
+});
+```
+
+> 详细代码可以参考：[Modern.js & React Compiler 示例项目](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/react-compiler)

packages/document/main-doc/docs/zh/guides/basic-features/output-files.mdx

@@ -96,34 +96,6 @@ dist
     └── qux.[hash].mp4
 ```
 
-<!-- ## Node.js 产物目录
-
-当你在 Modern.js 中开启了 SSR 或 SSG 等服务端功能时，Modern.js 会在构建后生成一份 Node.js 产物，并输出到 `bundles` 目录下：
-
-```bash
-dist
-├── bundles
-│   └── [name].js
-├── static
-└── html
-```
-
-Node.js 产物通常只包含 JS 文件，不包含 HTML、CSS 等文件。此外，Node 产物的 JS 文件名称也不会自动生成哈希值。
-
-你可以通过 [output.distPath.server](/configure/app/output/dist-path) 配置项来修改 Node 产物的输出路径。
-
-比如，将 Node.js 产物输出到 `server` 目录：
-
-```ts
-export default {
-  output: {
-    distPath: {
-      server: 'server',
-    },
-  },
-};
-``` -->
-
 ## 扁平化产物目录
 
 有时候你不想产物目录有太多层级，可以将目录设置为空字符串，使生成的产物目录扁平化。