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

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

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

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

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

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

Способы постепенного внедрения

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

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

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

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

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

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

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

// 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');
}

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

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

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

Дальнейшие действия

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