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

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

Управление компиляцией

Эти параметры определяют, что оптимизирует компилятор и как он выбирает компоненты и хуки для компиляции.

• compilationMode определяет стратегию выбора функций для компиляции (например, все функции, только аннотированные или выбранные с помощью интеллектуального обнаружения).

{
  compilationMode: 'annotation' // Only compile "use memo" functions
}

Совместимость версий

Конфигурация версии React гарантирует, что компилятор сгенерирует код, совместимый с вашей версией React.

target указывает, какую версию React вы используете (17, 18 или 19).

// For React 18 projects
{
  target: '18' // Also requires react-compiler-runtime package
}

Обработка ошибок

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

panicThreshold определяет, следует ли прервать сборку или пропустить проблемные компоненты.

// Recommended for production
{
  panicThreshold: 'none' // Skip components with errors instead of failing the build
}

Отладка

Параметры журналирования и анализа помогают понять, что делает компилятор.

logger предоставляет пользовательское журналирование событий компиляции.

{
  logger: {
    logEvent(filename, event) {
      if (event.kind === 'CompileSuccess') {
        console.log('Compiled:', filename);
      }
    }
  }
}

Флаги функций

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

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

{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'isCompilerEnabled'
  }
}

Распространённые варианты конфигурации

Конфигурация по умолчанию

Для большинства приложений на React 19 компилятор работает без дополнительной конфигурации:

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

Проекты на React 17/18

Для более старых версий React необходим пакет времени выполнения и настройка целевой версии:

npm install react-compiler-runtime@latest

{
  target: '18' // or '17'
}

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

Начните с отдельных каталогов и постепенно расширяйте область применения:

{
  compilationMode: 'annotation' // Only compile "use memo" functions
}