Hermes — що це, JS-рушій для React Native та принцип роботи

Що таке Hermes

Hermes — це компактний JavaScript-рушій з відкритим вихідним кодом (ліцензія MIT), створений Meta для React Native та оптимізований для роботи на мобільних пристроях з обмеженими ресурсами. Основна інновація Hermes — відмова від JIT-компіляції на користь AOT (Ahead-of-Time). На етапі збірки React Native додатку Metro Bundler передає скомпільований JavaScript в Hermes CLI, який перетворює його в байт-код HBC (Hermes ByteCode). Цей байт-код виконується безпосередньо рушієм без додаткової компіляції на пристрої. Такий підхід дає передбачувану продуктивність: немає "прогріву" JIT, немає пауз на компіляцію, немає додаткового витрачання батареї. Hermes розроблений з урахуванням обмежень мобільних пристроїв: малий об'єм RAM (1-4 GB), обмежене енергоспоживання та необхідність швидкого холодного старту. Перший публічний реліз Hermes відбувся в 2019 році, починаючи з React Native 0.70 (2022) рушій став стандартом на Android.

Hermes vs JavaScriptCore: порівняння рушіїв

JavaScriptCore (JSC) — стандартний рушій WebKit, який використовується Safari та React Native до версії 0.70. JSC підтримує JIT-компіляцію, що дає високу продуктивність виконання складних JavaScript-операцій. Однак JIT вимагає прогріву: перші секунди роботи код виконується повільніше (interpreted mode), потім JIT компілює гарячі ділянки. На iOS JIT практично недоступний через політики App Store (заборона на динамічну генерацію коду), тому JSC на iOS працює тільки в interpreted mode — продуктивність падає. JSC має більший розмір бінарника (близько 10 MB) та споживає більше RAM через JIT-інфраструктуру. Hermes не залежить від JIT, що дає передбачувану продуктивність одразу після запуску (cold start). JSC повніше підтримує стандарт ECMAScript (включаючи Proxy, BigInt, Reflect), але ціною більшого споживання ресурсів. Для React Native проектів, де критичні холодний старт та малий розмір — Hermes кращий. Для проектів з важкими обчисленнями на JS (ігри, WebGL) — JSC може дати більш високу пікову продуктивність.

AOT-компіляція: як працює попередня збірка

AOT-компіляція (Ahead-of-Time) в Hermes відбувається в два етапи. На першому етапі Metro Bundler збирає JavaScript-файли в єдиний бандл і передає його в Hermes CLI (утиліта hermesc). На другому етапі hermesc парсить JavaScript AST, генерує проміжне представлення HIR (Hermes Intermediate Representation) і потім емітує бінарний байт-код HBC. Результат — файл з розширенням .hbc, який містить тільки байт-код без вихідного JavaScript. Hermes runtime завантажує HBC безпосередньо, без парсингу та компіляції. Це радикально прискорює startup: замість парсингу тисяч рядків JS (async) рушій читає попередньо скомпільований бінарний формат. AOT також зменшує розмір: байт-код компактніший за JavaScript AST в середньому на 30%. Недолік AOT — неможливість виконання eval, new Function або динамічного require в рантаймі — всі модулі повинні бути відомі на етапі збірки.

# Встановити Hermes CLI окремо
npm install hermes-engine

# Компілювати JS в HBC байт-код
npx hermesc -emit-binary -out bundle.hbc bundle.js

# Статистика байт-коду
npx hermesc -dump-bytecode bundle.hbc  # shows HBC instructions

# Оригінальний JS vs HBC розмір
wc -c bundle.js      # 2,300,000 bytes
wc -c bundle.hbc     # 1,450,000 bytes (37% reduction)

Метрики продуктивності Hermes

Продуктивність Hermes вимірюється за трьома ключовими метриками: Time-To-Interactive (TTI), розмір APK/IPA та споживання RAM. За даними Meta, на Android Hermes скорочує TTI на 34% порівняно з JSC: з 4.2 секунд до 2.8 секунд на пристрої середнього сегмента (Moto G7). Розмір APK зменшується на 28% завдяки компактному байт-коду та відсутності JIT-бібліотек. Споживання RAM в середньому нижче на 22% при однаковому навантаженні — це особливо важливо для пристроїв з 2-3 GB RAM. На iOS виграш ще значніший: оскільки JSC не може використовувати JIT, Hermes дає приріст TTI до 45%. Метрики засновані на тестах Meta з додатком Facebook Lite. В реальних проектах виграш варіюється: для простих екранів (списки, текст) Hermes дає більший приріст, для важких анімацій — менший. Інструмент профілювання: React Native Profiler + hermes profile --heap.

Профілювання пам'яті з Hermes

Hermes включає вбудований профілювальник пам'яті, доступний через Chrome DevTools. Підключіться до додатку через Metro, відкрийте вкладку Memory та виберіть Hermes (JavaScript) в типах знімків. Hermes підтримує три типи знімків: Heap Snapshot (всі об'єкти), Allocation Timeline (час життя об'єктів) та Allocation Sampling (вибірковий профіль). Hades GC знижує кількість GC-пауз до мінімуму — в середньому одна пауза тривалістю 2-5ms за 10 секунд роботи проти 10-20ms пауз у JSC за той самий період.

Збирач сміття Hades GC

Hades GC — це збирач сміття в Hermes, спроектований для мобільних сценаріїв з мінімальними паузами. На відміну від mark-sweep GC в JSC, Hades використовує конкурентну (concurrent) збірку: збирач працює паралельно з основним потоком виконання, зупиняючи його тільки на короткі проміжки. Hades GC розділяє купу на покоління: молоде покоління (nursery) збирається часто та швидко (Scavenge), старе покоління збирається рідше та з меншими паузами. Розмір купи налаштовується: за замовчуванням — 2/3 доступної RAM додатку, мінімальний поріг — 32 MB. Hades не використовує stop-the-world підхід: навіть повна збірка старого покоління займає не більше 5-8ms. Збирач оптимізований під типовий мобільний сценарій: багато короткоживучих об'єктів (тимчасові рядки, об'єкти React fibre), мало довгоживучих. Для додатків з інтенсивним створенням об'єктів (списки, анімації) Hades дає більш плавний FPS порівняно з JSC.

Як увімкнути Hermes в React Native проекті

Ввімкнення Hermes залежить від версії React Native та платформи. Починаючи з React Native 0.70, Hermes ввімкнено за замовчуванням для Android в нових проектах. Для iOS Hermes опціональний. Для ввімкнення на Android: у файлі android/app/build.gradle встановіть enableHermes: true в блоці project.ext.react.enableHermes. Для iOS: встановіть hermes_enabled в true в Podfile через use_react_native!(:path => config[:reactNativePath], :hermes_enabled => true). Після ввімкнення виконайте pod install. Для існуючих проектів перевірте сумісність бібліотек: Hermes не підтримує Proxy, eval та деякі ES2021 фічі. Використовуйте npx react-native info для перевірки конфігурації. Для перемикання між Hermes та JSC змініть флаг та виконайте clean rebuild.

// android/app/build.gradle — ввімкнути Hermes
project.ext.react = [
    enableHermes: true,
    cliPath: "node_modules/react-native/cli.js"
]

// iOS/Podfile — ввімкнути Hermes на iOS
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'MyApp' do
  config = use_native_modules!
  use_react_native!(
    :path => config[:reactNativePath],
    :hermes_enabled => true
  )
end

Обмеження Hermes: що не підтримується

Основні обмеження Hermes пов'язані з відмовою від JIT. Hermes не підтримує: Proxy та Reflect API (використовується в MobX, Vue, деяких state-менеджерах), BigInt (великі числа), Symbol.toStringTag, WeakRef та FinalizationRegistry. Функції eval та new Function генерують виняток під час виконання. Колбеки методів Array.prototype.flat та flatMap з this аргументом працюють з обмеженнями. Дата-формати ISO 8601 з часовими поясами обробляються не повністю. Більшість цих обмежень не впливають на типові React Native додатки: React та React Native використовують обмежений набір ES-фіч. Якщо бібліотека вимагає Proxy (наприклад, MobX 6+ з Proxy), використовуйте configure({ useProxies: false }) або виберіть альтернативу. Для перевірки сумісності існуючого коду запустіть npx hermesc -check на вашому бандлі — він покаже список непідтримуваних фіч.

• Proxy / Reflect — не реалізовані; бібліотеки з Proxy вимагають fallback-режим
• BigInt — недоступний; використовуйте бібліотеки bignumber.js для великих чисел
• eval / new Function — виклик throw; всі модулі повинні бути статичними
• WeakRef / FinalizationRegistry — не підтримуються; альтернативи немає
• Symbol.toStringTag — ігнорується; instanceof працює коректно