Установка

Это руководство поможет установить и настроить React Compiler в приложении 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, который встраивается в конвейер сборки.

Ловушка

React Compiler должен выполняться первым в конвейере плагинов Babel. Компилятору нужна исходная информация о коде для правильного анализа, поэтому он должен обработать код раньше других преобразований.

Babel

Создайте или обновите babel.config.js:

module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // must run first!
    // ... other plugins
  ],
  // ... other config
};

Vite

Если вы используете Vite с версией 6.0.0 или новее пакета @vitejs/plugin-react, можно использовать reactCompilerPreset:

npm install -D @rolldown/plugin-babel

// vite.config.js
import { defineConfig } from 'vite';
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()]
    }),
  ],
});

Примечание

В @vitejs/[email protected] встроенный параметр Babel убрали. Если вы используете более старую версию, можно сделать так:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Другой вариант: использовать плагин Babel напрямую вместе с @rolldown/plugin-babel:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  plugins: [
    react(),
    babel({
      plugins: ['babel-plugin-react-compiler'],
    }),
  ],
});

Next.js

Подробности смотрите в документации Next.js.

React Router

Установите vite-plugin-babel и добавьте в него плагин Babel компилятора:

npm install vite-plugin-babel

// vite.config.js
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import { reactRouter } from "@react-router/dev/vite";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    reactRouter(),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // if you use TypeScript
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

Загрузчик webpack от сообщества теперь доступен здесь.

Expo

Чтобы включить и использовать React Compiler в приложениях Expo, смотрите документацию Expo.

Metro (React Native)

React Native использует Babel через Metro, поэтому инструкции по установке смотрите в разделе Использование с Babel.

Rspack

Чтобы включить и использовать React Compiler в приложениях Rspack, смотрите документацию Rspack.

Rsbuild

Чтобы включить и использовать React Compiler в приложениях Rsbuild, смотрите документацию Rsbuild.

Интеграция с 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, показывают значок «Memo ✨» в React DevTools:

1. Установите расширение браузера React Developer Tools
2. Откройте приложение в режиме разработки
3. Откройте React DevTools
4. Найдите эмодзи ✨ рядом с именами компонентов

Если компилятор работает: - У компонентов в React DevTools будет значок «Memo ✨» - Дорогие вычисления будут мемоизироваться автоматически - Ручной useMemo не нужен

Проверка результата сборки

Убедиться, что компилятор работает, можно и по результату сборки. В скомпилированном коде появится логика автоматической мемоизации, которую компилятор добавляет сам.

import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Hello World</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}

Устранение неполадок

Исключение отдельных компонентов

Если после компиляции компонент вызывает проблемы, его можно временно исключить директивой "use no memo":

function ProblematicComponent() {
  "use no memo";
  // Component code here
}

Это говорит компилятору пропустить оптимизацию этого конкретного компонента. Нужно исправить исходную проблему и убрать директиву, когда она будет решена.

Дополнительная помощь по неполадкам — в руководстве по отладке.

Следующие шаги

Теперь, когда React Compiler установлен, узнайте больше о следующем:

• Совместимость версий React для React 17 и 18
• Параметры конфигурации, чтобы настроить компилятор
• Стратегии постепенного внедрения для существующих кодовых баз
• Приёмы отладки, чтобы разбирать проблемы
• Руководство по компиляции библиотек, чтобы скомпилировать библиотеку React

Источник — https://react.dev/learn/react-compiler/installation

Комментарии