Hermes: что это, возможности и оптимизация для React Native

Что такое Hermes?

Hermes — это компактный JavaScript-движок, созданный командой Meta специально для React Native. Он был анонсирован в 2019 году как альтернатива JavaScriptCore (JSC), который использовался в React Native по умолчанию. Основная цель Hermes — обеспечить максимально быстрый запуск приложений на мобильных устройствах, особенно на Android с ограниченными ресурсами.

Ключевая особенность Hermes — предварительная компиляция (AOT — Ahead-of-Time). В отличие от традиционных JS-движков, которые компилируют код в рантайме (JIT — Just-in-Time), Hermes компилирует JavaScript в байткод ещё на этапе сборки приложения. Это означает, что на устройстве не выполняется компиляция — байткод сразу исполняется виртуальной машиной Hermes.

Hermes не является универсальным JS-движком — он оптимизирован исключительно для сценариев React Native. В нём отсутствуют возможности, невостребованные в мобильной разработке: eval, генераторы, некоторые ES6-фичи. Это позволяет сделать движок компактнее и быстрее. По данным Meta, размер Hermes составляет около 200–300 КБ в сжатом виде, что значительно меньше JSC (примерно 2–3 МБ).

Архитектура Hermes и байткод

Архитектура Hermes отличается от традиционных JS-движков отсутствием JIT-компилятора. Вместо этого Hermes использует эффективную виртуальную машину (VM), которая исполняет заранее скомпилированный байткод. Отказ от JIT даёт три ключевых преимущества: предсказуемая производительность, меньшее потребление памяти и сокращение времени старта.

Байткод Hermes — это компактное представление JavaScript-кода, оптимизированное для быстрого исполнения. На этапе сборки (через Metro) JavaScript-файлы компилируются в .hbc (Hermes Bytecode) файлы. Приложение загружает эти файлы, и VM Hermes исполняет их без дополнительной компиляции. Процесс сборки интегрирован в Metro через плагин hermes-transformer.

Этапы обработки кода

Процесс обработки JavaScript в Hermes состоит из трёх этапов: Parse — синтаксический анализ исходного кода, Compile — трансляция в байткод, Execute — исполнение байткода виртуальной машиной. Первые два этапа выполняются на этапе сборки, третий — на устройстве. Это коренным образом отличается от JSC, где все три этапа выполняются на устройстве.

# Hermes bytecode compilation during build
hermes -emit-binary -out index.hbc index.js

# Check generated bytecode size
ls -lh index.hbc

# Display bytecode statistics
hermes -dump-bytecode index.hbc

# Optimize bytecode for production
hermes -O index.js -emit-binary -O target.hbc

После компиляции все .hbc файлы упаковываются в APK или IPA вместе с нативным кодом. При запуске приложения Hermes VM загружает байткод и начинает исполнение практически мгновенно — не требуется время на JIT-прогрев, который типичен для V8 и JSC.

Hermes vs JSC: сравнение

Сравнение Hermes и JavaScriptCore (JSC) помогает понять, когда какой движок выбрать. JSC — полноценный JS-движок от Apple, используемый в Safari. Hermes — специализированный движок для React Native. Выбор между ними зависит от приоритетов проекта.

Hermes выигрывает в скорости запуска и потреблении памяти, но уступает JSC в производительности выполнения сложных вычислений. JIT-компиляция JSC оптимизирует горячие участки кода во время выполнения, что даёт преимущество на CPU-интенсивных операциях. Для типичного React Native приложения, где UI-обновления и навигация составляют основную нагрузку, Hermes обеспечивает лучший пользовательский опыт за счёт быстрого старта.

Оптимизации Hermes для React Native

Hermes включает несколько оптимизаций, специфичных для React Native. Главная из них — интеграция с JSI (JavaScript Interface). Hermes поддерживает JSI нативно, что позволяет использовать новую архитектуру React Native (Fabric + Turbo Module) без дополнительных прослоек. Это делает Hermes и новую архитектуру идеальной парой для максимальной производительности.

Управление памятью

Hermes использует сборщик мусора с поколенческой стратегией (generational GC), оптимизированный для мобильных устройств. В отличие от JSC, где сборка мусора может вызвать заметные паузы в UI (jank), Hermes выполняет GC маленькими порциями между кадрами, минимизируя влияние на пользовательский опыт. По данным Meta, GC паузы в Hermes в 2–3 раза короче, чем в JSC на типичных React Native сценариях.

Lazy требование и константы

Hermes поддерживает ленивую загрузку модулей — JavaScript-модуль компилируется только когда он реально требуется. Это сокращает размер байткода и ускоряет старт. Дополнительно Hermes вычисляет константные выражения на этапе компиляции, заменяя вызовы функций константными значениями там, где это возможно.

// Hermes-specific optimizations example

// 1. Hermes inlines constant expressions
const TAX_RATE = 0.07;
const price = 100;
// Hermes pre-computes: TAX_RATE * price during compilation
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimizes property access chains
const config = { api: { timeout: 5000 } };
// Hermes caches config.api access internally
const timeout = config.api.timeout;
fetch(url, { timeout });

Важно отметить, что Hermes поддерживает отладку через Chrome DevTools (начиная с версии Hermes 0.12). Разработчик может использовать привычные инструменты: брейкпоинты, профилирование памяти, инспекцию переменных. Это устраняет одно из главных возражений против Hermes в ранних версиях, когда отладка была ограничена.

Настройка Hermes в проекте React Native

Настройка Hermes зависит от версии React Native. Начиная с React Native 0.70 Hermes включён по умолчанию для новых проектов. Для проектов, созданных ранее, или при необходимости переключения между движками, настройка выполняется через конфигурацию сборки.

Настройка для Android

Для Android Hermes включается в файле android/app/build.gradle через флаг hermesEnabled. Для iOS настройка выполняется в Podfile через переменную :hermes_enabled. После изменения конфигурации необходимо переустановить поды и пересобрать проект.

// android/app/build.gradle — enable Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — enable Hermes
hermes_enabled = true
pod 'hermes-engine'

Для проверки, что Hermes используется в приложении, выполните adb logcat | grep Hermes на Android или проверьте консоль Xcode на iOS. При старте приложения Hermes выводит сообщение "Hermes VM initialized" или аналогичное. Также можно выполнить globalThis.HermesInternal в JavaScript-коде — если Hermes активен, это свойство будет доступно.

// Check if Hermes is running
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes engine active');
  console.log(
    'Version:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes not active (fallback to JSC)');
}