Поэтапное внедрение

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

Вы узнаете

Почему рекомендуется постепенное внедрение
Использование переопределений Babel для внедрения на основе каталогов
Использование директивы 'use memo' для компиляции по выбору
Использование директивы 'use no memo' для исключения компонентов
Флаги функций на этапе выполнения с контролем доступа
Отслеживание хода внедрения

Почему стоит выбирать постепенное внедрение?

React Compiler предназначен для автоматической оптимизации всего вашего кода, но вам не обязательно внедрять его сразу полностью. Поэтапное внедрение дает вам контроль над процессом развертывания, позволяя протестировать компилятор на небольших частях вашего приложения, прежде чем расширять его на остальные. Начав с малого, вы сможете укрепить уверенность в оптимизациях компилятора. Вы сможете убедиться, что ваше приложение корректно работает с скомпилированным кодом, измерить улучшение производительности и выявить любые крайние случаи, характерные для вашей кодовой базы. Этот подход особенно ценен для производственных приложений, где стабильность имеет решающее значение. Постепенное внедрение также упрощает устранение любых нарушений 'Правил React', которые может обнаружить компилятор. Вместо того чтобы исправлять нарушения во всей кодовой базе сразу, вы можете решать их систематически по мере расширения охвата компилятора. Это позволяет упростить управление миграцией и снизить риск появления ошибок. Контролируя, какие части вашего кода компилируются, вы также можете проводить A/B-тесты, чтобы измерить реальное влияние оптимизаций компилятора. Эти данные помогут вам принять обоснованные решения о полном внедрении и продемонстрировать ценность этого шага вашей команде.

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

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

Babel overrides — применение компилятора к определенным каталогам
Включение с помощью 'use memo' — компилируйте только те компоненты, которые явно включены
Управление на этапе выполнения — управляйте компиляцией с помощью флагов функций Все подходы позволяют протестировать компилятор на определенных частях вашего приложения перед полным внедрением.

Внедрение на основе каталогов с переопределениями Babel

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

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

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

// babel.config.js
module.exports = {
  
plugins: [
    // Глобальные плагины, которые применяются ко всем файлам
  ],
  overrides: [
    {
      test: './src/modern/**/*.{js,jsx,ts,tsx}',
      plugins: [
        'babel-plugin-react-compiler'
      ]
    }
  ]
};

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

По мере того, как вы наберетесь уверенности, добавьте больше каталогов:

// babel.config.js
module.exports = {
  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: [
        // Различные плагины для устаревшего кода
      ]
    }
  ]
};

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

Вы также можете настроить параметры компилятора для каждого переопределения:

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

Режим включения с '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'; // Включить этот компонент в компиляцию
  const sortedTodos = todos.slice().sort();
  return (
    <ul>
      
{sortedTodos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </ul>
  );
}
function useSortedData(data) {
  'use memo'; // Включить этот хук в компиляцию
  return data.slice().sort();
}

При использовании compilationMode: 'annotation' необходимо:

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

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

Реализация флага функции

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

// ReactCompilerFeatureFlags.js
export function isCompilerEnabled() {
  // Используйте вашу систему флагов функций
  return getFeatureFlag('react-compiler-enabled');
}

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

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

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

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

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