Skip to main content

reactCompiler

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

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

工作原理​

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

这避免了编译所有内容，并将性能成本保持在最低水平。与默认的基于 Rust 的编译器相比，你可能仍会看到稍微慢一些的构建，但影响很小且是局部的。

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

Terminal
npm install babel-plugin-react-compiler

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

next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

注释​

你可以配置编译器以"选择加入"模式运行，如下所示：

next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

然后，你可以使用 React 的 "use memo" 指令注释特定的组件或 hooks 来选择加入：

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

注意： 你也可以使用 React 的 "use no memo" 指令来达到相反的效果，选择退出组件或 hook。

Last updated on