安裝

本指南將協助您在您的 React 應用程式中安裝並配置 React Compiler。

先決條件

React Compiler 設計為與 React 19 搭配使用效果最佳，但也支援 React 17 和 18。了解更多關於React 版本相容性的資訊。

安裝

將 React Compiler 安裝為devDependency：

npm install -D babel-plugin-react-compiler@latest

或使用 Yarn：

yarn add -D babel-plugin-react-compiler@latest

或使用 pnpm：

pnpm install -D babel-plugin-react-compiler@latest

基本設定

React Compiler 設計為預設無需任何配置即可運作。然而，如果您需要在特殊情況下配置它（例如，針對 React 19 以下的版本），請參閱編譯器選項參考。

設定過程取決於您的建置工具。React Compiler 包含一個與您的建置流程整合的 Babel 外掛。

Babel

建立或更新您的babel.config.js：

Vite

如果您使用 Vite，可以將外掛添加到 vite-plugin-react：

或者，如果您偏好為 Vite 使用獨立的 Babel 外掛：

npm install -D vite-plugin-babel

Next.js

請參閱js 文件以獲取更多資訊。

React Router

安裝vite-plugin-babel，並將編譯器的 Babel 外掛添加到其中：

npm install vite-plugin-babel

Webpack

社群提供的 webpack loader 現在可在此處取得。

Expo

請參閱Expo 的文件以在 Expo 應用程式中啟用和使用 React Compiler。

Metro (React Native)

React Native 透過 Metro 使用 Babel，因此請參閱搭配 Babel 使用章節以獲取安裝說明。

Rspack

請參閱Rspack 的文件以在 Rspack 應用程式中啟用和使用 React Compiler。

Rsbuild

請參閱Rsbuild 的文件以在 Rsbuild 應用程式中啟用和使用 React Compiler。

ESLint 整合

React Compiler 包含一個 ESLint 規則，可協助識別無法最佳化的程式碼。當 ESLint 規則報告錯誤時，意味著編譯器將跳過最佳化該特定元件或鉤子。這是安全的：編譯器將繼續最佳化您程式碼庫的其他部分。您不需要立即修復所有違規。您可以按照自己的步調處理它們，以逐步增加最佳化元件的數量。

安裝 ESLint 外掛：

npm install -D eslint-plugin-react-hooks@latest

如果您尚未配置 eslint-plugin-react-hooks，請遵循README 中的安裝說明。編譯器規則可在recommended-latest預設集中取得。

ESLint 規則將：

• 識別違反 React 規則
• 顯示哪些元件無法被優化
• 提供有用的錯誤訊息以修復問題

驗證您的設定

安裝後，請驗證 React Compiler 是否正常運作。

檢查 React DevTools

被 React Compiler 優化的元件將在 React DevTools 中顯示「Memo ✨」徽章：

1. 安裝 React Developer Tools瀏覽器擴充功能
2. 在開發模式下開啟您的應用程式
3. 開啟 React DevTools
4. 在元件名稱旁尋找 ✨ 表情符號

如果編譯器正常運作：

• 元件將在 React DevTools 中顯示「Memo ✨」徽章
• 昂貴的計算將被自動記憶化
• 無需手動使用useMemo

檢查建置輸出

您也可以透過檢查建置輸出來驗證編譯器是否正在執行。編譯後的程式碼將包含編譯器自動加入的自動記憶化邏輯。

疑難排解

選擇退出特定元件

如果某個元件在編譯後導致問題，您可以使用 "use no memo"指令暫時將其退出：

這會告訴編譯器跳過對此特定元件的優化。您應該修復根本問題，並在解決後移除該指令。

如需更多疑難排解協助，請參閱除錯指南。

後續步驟

現在您已安裝 React Compiler，請進一步了解：

• React 版本相容性適用於 React 17 和 18
• 設定選項 以自訂編譯器
• 漸進式採用策略適用於現有程式碼庫
• 除錯技巧 用於疑難排解問題
• 編譯函式庫指南用於編譯您的 React 函式庫