Постепенное внедрение¶

React Compiler можно внедрять постепенно: сначала попробовать его на отдельных частях кодовой базы. Это руководство показывает, как постепенно выкатывать компилятор в существующих проектах.

Вы узнаете

Почему рекомендуют постепенное внедрение
Переопределения Babel для внедрения по каталогам
Директива "use memo" для компиляции по явному включению
Директива "use no memo", чтобы исключить компоненты
Флаги возможностей во время выполнения и гейтинг
Как следить за ходом внедрения

Зачем постепенное внедрение?¶

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

Начав с малого, вы укрепите уверенность в оптимизациях компилятора. Можно убедиться, что приложение ведёт себя правильно со скомпилированным кодом, измерить прирост производительности и найти пограничные случаи, специфичные для вашей кодовой базы. Такой подход особенно ценен для производственных приложений, где стабильность критична.

Постепенное внедрение также упрощает исправление нарушений Правил React, которые может найти компилятор. Вместо того чтобы чинить нарушения сразу по всей кодовой базе, можно разбирать их систематически по мере расширения охвата компилятора. Так миграция остаётся управляемой, а риск внести ошибки снижается.

Управляя тем, какие части кода компилируются, можно также проводить A/B-тесты и измерять реальное влияние оптимизаций компилятора. Эти данные помогают принять обоснованное решение о полном внедрении и показать ценность команде.

Подходы к постепенному внедрению¶

Есть три основных подхода к постепенному внедрению React Compiler:

Переопределения Babel — применять компилятор к конкретным каталогам
Явное включение через "use memo" — компилировать только компоненты, которые явно включены
Гейтинг во время выполнения — управлять компиляцией флагами возможностей

Все подходы позволяют проверить компилятор на отдельных частях приложения до полной выкатки.

Внедрение по каталогам с помощью переопределений Babel¶

Параметр overrides в Babel позволяет применять разные плагины к разным частям кодовой базы. Это удобно, чтобы внедрять React Compiler каталог за каталогом.

Базовая конфигурация¶

Начните с применения компилятора к конкретному каталогу:

// babel.config.js
module.exports = {
  plugins: [
    // Global plugins that apply to all files
  ],
  overrides: [
    {
      test: './src/modern/**/*.{js,jsx,ts,tsx}',
      plugins: [
        'babel-plugin-react-compiler'
      ]
    }
  ]
};

Расширение охвата¶

Когда появится уверенность, добавьте ещё каталоги:

// babel.config.js
module.exports = {
  plugins: [
    // Global plugins
  ],
  overrides: [
    {
      test: ['./src/modern/**/*.{js,jsx,ts,tsx}', './src/features/**/*.{js,jsx,ts,tsx}'],
      plugins: [
        'babel-plugin-react-compiler'
      ]
    },
    {
      test: './src/legacy/**/*.{js,jsx,ts,tsx}',
      plugins: [
        // Different plugins for legacy code
      ]
    }
  ]
};

С параметрами компилятора¶

Параметры компилятора можно задавать и для каждого переопределения:

// babel.config.js
module.exports = {
  plugins: [],
  overrides: [
    {
      test: './src/experimental/**/*.{js,jsx,ts,tsx}',
      plugins: [
        ['babel-plugin-react-compiler', {
          // options ...
        }]
      ]
    },
    {
      test: './src/production/**/*.{js,jsx,ts,tsx}',
      plugins: [
        ['babel-plugin-react-compiler', {
          // options ...
        }]
      ]
    }
  ]
};

Режим явного включения с "use memo"¶

Для максимального контроля можно задать compilationMode: 'annotation', чтобы компилировать только компоненты и хуки, которые явно включаются директивой "use memo".

Примечание

Этот подход даёт тонкий контроль над отдельными компонентами и хуками. Он полезен, когда нужно проверить компилятор на конкретных компонентах, не затрагивая целые каталоги.

Конфигурация режима аннотаций¶

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation',
    }],
  ],
};

Использование директивы¶

Добавьте "use memo" в начало функций, которые нужно скомпилировать:

function TodoList({ todos }) {
  "use memo"; // Opt this component into compilation

  const sortedTodos = todos.slice().sort();

  return (
    <ul>
      {sortedTodos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}

function useSortedData(data) {
  "use memo"; // Opt this hook into compilation

  return data.slice().sort();
}

При compilationMode: 'annotation' нужно: - Добавить "use memo" в каждый компонент, который вы хотите оптимизировать - Добавить "use memo" в каждый пользовательский хук - Не забывать добавлять её в новые компоненты

Так вы точно контролируете, какие компоненты компилируются, пока оцениваете влияние компилятора.

Флаги возможностей во время выполнения и гейтинг¶

Параметр gating позволяет управлять компиляцией во время выполнения с помощью флагов возможностей. Это полезно для A/B-тестов или постепенной выкатки компилятора по сегментам пользователей.

Как работает гейтинг¶

Компилятор оборачивает оптимизированный код в проверку во время выполнения. Если гейт возвращает true, выполняется оптимизированная версия. Иначе выполняется исходный код.

Конфигурация гейтинга¶

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      gating: {
        source: 'ReactCompilerFeatureFlags',
        importSpecifierName: 'isCompilerEnabled',
      },
    }],
  ],
};

Реализация флага возможности¶

Создайте модуль, который экспортирует функцию гейтинга:

// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
  // Use your feature flag system
  return getFeatureFlag('react-compiler-enabled');
}

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

Если во время внедрения возникают проблемы:

Используйте "use no memo", чтобы временно исключить проблемные компоненты
Проверьте руководство по отладке на типичные проблемы
Исправьте нарушения Правил React, которые нашёл плагин ESLint
Подумайте об использовании compilationMode: 'annotation' для более постепенного внедрения

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

Прочитайте руководство по конфигурации, чтобы узнать о других параметрах
Изучите приёмы отладки
Посмотрите справочник API со всеми параметрами компилятора

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