Перейти к содержанию

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

На этой странице перечислены все параметры конфигурации React Compiler.

Примечание

Для большинства приложений параметры по умолчанию работают без дополнительной настройки. Если нужны особые возможности, можно использовать эти расширенные параметры.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// babel.config.js
module.exports = {
  plugins: [
    [
      'babel-plugin-react-compiler', {
        // compiler options
      }
    ]
  ]
};

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

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

  • compilationMode задаёт стратегию выбора функций для компиляции (например, все функции, только аннотированные или интеллектуальное обнаружение).
1
2
3
{
  compilationMode: 'annotation' // Only compile "use memo" functions
}

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

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

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

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

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

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

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

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

Отладка

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

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

1
2
3
4
5
6
7
8
9
{
  logger: {
    logEvent(filename, event) {
      if (event.kind === 'CompileSuccess') {
        console.log('Compiled:', filename);
      }
    }
  }
}

Функциональные флаги

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

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

1
2
3
4
5
6
{
  gating: {
    source: 'my-feature-flags',
    importSpecifierName: 'isCompilerEnabled'
  }
}

Типичные шаблоны конфигурации

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

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

1
2
3
4
5
6
// babel.config.js
module.exports = {
  plugins: [
    'babel-plugin-react-compiler'
  ]
};

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

Более старым версиям React нужны пакет runtime и конфигурация target:

1
npm install react-compiler-runtime@latest
1
2
3
{
  target: '18' // or '17'
}

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

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

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

Источник — https://react.dev/reference/react-compiler/configuration

Комментарии