reactCompiler

Next.js 包含对 React 编译器 (React Compiler) 的支持，该工具旨在通过自动优化组件渲染来提升性能。这减少了手动使用 useMemo 和 useCallback 进行记忆化的需求。

Next.js 包含一个用 SWC 编写的自定义性能优化方案，使 React 编译器更加高效。不同于在每个文件上运行编译器，Next.js 会分析您的项目并仅对相关文件应用 React 编译器。这避免了不必要的工作，相比单独使用 Babel 插件，能带来更快的构建速度。

工作原理

React 编译器通过 Babel 插件运行。为了保持构建速度，Next.js 使用了一个自定义的 SWC 优化方案，仅对相关文件（如包含 JSX 或 React Hooks 的文件）应用 React 编译器。

这避免了全量编译，并将性能开销降至最低。相比默认基于 Rust 的编译器，您可能仍会看到构建速度稍慢，但影响很小且仅限于局部。

要使用它，请安装 babel-plugin-react-compiler：

npm install babel-plugin-react-compiler

然后，在 next.config.js 中添加 experimental.reactCompiler 选项：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: true,
  },
}

export default nextConfig

注解

您可以如下配置编译器以 "选择性启用" 模式运行：

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
}

export default nextConfig

然后，您可以使用 React 的 "use memo" 指令来选择性启用特定的组件或 Hook：

export default function Page() {
  'use memo'
  // ...
}

注意： 您也可以使用 React 的 "use no memo" 指令达到相反效果，即选择性禁用某个组件或 Hook。