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

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

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

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

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

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

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

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

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

1. Переопределения Babel— Применять компилятор к определенным директориям
2. Выборочное участие с “use memo”— Компилировать только компоненты, которые явно согласились
3. Управление доступом во время выполнения— Управлять компиляцией с помощью флагов функций

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

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

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

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

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

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

По мере роста уверенности добавляйте больше директорий:

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

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

Режим выборочного участия с “use memo”

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

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

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

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

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

• Добавлять"use memo"в каждый компонент, который нужно оптимизировать
• Добавлять"use memo"в каждый пользовательский хук
• Не забывать добавлять его в новые компоненты

Это даёт точный контроль над тем, какие компоненты компилируются, пока вы оцениваете влияние компилятора.

Флаги функций времени выполнения с использованием Gating

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

Как работает Gating

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

Конфигурация Gating

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

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

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

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

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

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

• Прочтитеруководство по конфигурациидля получения дополнительных опций
• Узнайте ометодах отладки
• Ознакомьтесь ссправочником по APIдля всех опций компилятора