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 під час збірки
hermes -emit-binary -out index.hbc index.js

# Перевірити розмір згенерованого байткоду
ls -lh index.hbc

# Показати статистику байткоду
hermes -dump-bytecode index.hbc

# Оптимізувати байткод для продакшну
hermes -O index.js -emit-binary -O target.hbc

Після компіляції всі .hbc файли упаковуються в APK або IPA разом із нативним кодом. При запуску додатку VM Hermes завантажує байткод і починає виконання практично миттєво — не потрібен час на 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 Modules) без додаткових прошарків. Це робить Hermes та нову архітектуру ідеальною парою для максимальної продуктивності.

Управління пам’яттю

Hermes використовує збирач сміття з поколінською стратегією (generational GC), оптимізований для мобільних пристроїв. На відміну від JSC, де збірка сміття може викликати помітні паузи в UI (jank), Hermes виконує GC маленькими порціями між кадрами, мінімізуючи вплив на користувацький досвід. За даними Meta, GC паузи в Hermes в 2–3 рази коротші, ніж в JSC на типових React Native сценаріях.

Lazy вимога та константи

Hermes підтримує ліниве завантаження модулів — JavaScript-модуль компілюється тільки коли він реально потрібен. Це скорочує розмір байткоду та прискорює запуск. Додатково Hermes обчислює константні вирази на етапі компіляції, замінюючи виклики функцій константними значеннями там, де це можливо.

// Приклад оптимізацій, специфічних для Hermes

// 1. Hermes вбудовує константні вирази
const TAX_RATE = 0.07;
const price = 100;
// Hermes попередньо обчислює: TAX_RATE * price під час компіляції
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes оптимізує ланцюжки доступу до властивостей
const config = { api: { timeout: 5000 } };
// Hermes кешує доступ до config.api внутрішньо
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 — увімкнути Hermes
project.ext.react = [
    enableHermes: true
]

// iOS Podfile — увімкнути Hermes
hermes_enabled = true
pod 'hermes-engine'

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

// Перевірити, чи працює Hermes
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Рушій Hermes активний');
  console.log(
    'Версія:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes не активний (повернення до JSC)');
}