Hermes: vad är det, funktioner och optimering för React Native

Vad är Hermes?

Hermes — är en kompakt JavaScript-motor, skapad av Meta-teamet speciellt för React Native. Den tillkännagavs 2019 som ett alternativ till JavaScriptCore (JSC), som användes som standard i React Native. Huvudmålet med Hermes är att säkerställa snabbast möjliga start av applikationer på mobila enheter, särskilt på Android med begränsade resurser.

Huvudfunktionen hos Hermes är förhandskompilering (AOT — Ahead-of-Time). Till skillnad från traditionella JS-motorer som kompilerar kod under körning (JIT — Just-in-Time), kompilerar Hermes JavaScript till bytekod redan i byggfasen av applikationen. Detta innebär att ingen kompilering sker på enheten — bytekoden exekveras omedelbart av Hermes virtuella maskin.

Hermes är ingen universell JS-motor — den är optimerad uteslutande för React Native-scenarier. Den saknar funktioner som inte behövs i mobil utveckling: eval, generatorer, vissa ES6-funktioner. Detta gör motorn mer kompakt och snabbare. Enligt Meta är Hermes storlek cirka 200–300 KB i komprimerad form, vilket är betydligt mindre än JSC (cirka 2–3 MB).

Hermes arkitektur och bytekod

Arkitekturen för Hermes skiljer sig från traditionella JS-motorer genom frånvaron av en JIT-kompilator. Istället använder Hermes en effektiv virtuell maskin (VM) som exekverar förhandskompilerad bytekod. Att avstå från JIT ger tre viktiga fördelar: förutsägbar prestanda, lägre minnesförbrukning och kortare starttid.

Hermes bytekod är en kompakt representation av JavaScript-kod, optimerad för snabb exekvering. I byggfasen (via Metro) kompileras JavaScript-filer till .hbc (Hermes Bytecode)-filer. Applikationen laddar dessa filer och Hermes VM exekverar dem utan ytterligare kompilering. Byggprocessen är integrerad i Metro via plugin-programmet hermes-transformer.

Faser av kodbehandling

Processen för JavaScript-behandling i Hermes består av tre faser: Parse — syntaktisk analys av källkoden, Compile — översättning till bytekod, Execute — exekvering av bytekod av den virtuella maskinen. De första två faserna utförs i byggfasen, den tredje — på enheten. Detta skiljer sig fundamentalt från JSC, där alla tre faser utförs på enheten.

# Hermes bytekod-kompilering under byggnad
hermes -emit-binary -out index.hbc index.js

# Kontrollera storleken på genererad bytekod
ls -lh index.hbc

# Visa bytekod-statistik
hermes -dump-bytecode index.hbc

# Optimera bytekod för produktion
hermes -O index.js -emit-binary -O target.hbc

Efter kompilering paketeras alla .hbc-filer tillsammans med native-kod i APK eller IPA. När applikationen startar laddar Hermes VM bytekoden och börjar exekvera nästan omedelbart — ingen JIT-uppvärmningstid krävs, vilket är typiskt för V8 och JSC.

Hermes vs JSC: jämförelse

Jämförelsen av Hermes och JavaScriptCore (JSC) hjälper till att förstå när man ska välja vilken motor. JSC — en fullfjädrad JS-motor från Apple, som används i Safari. Hermes — en specialiserad motor för React Native. Valet mellan dem beror på projektets prioriteringar.

Hermes vinner i starthastighet och minnesförbrukning, men förlorar mot JSC i prestanda för komplexa beräkningar. JSC:s JIT-kompilering optimerar heta kodavsnitt under körning, vilket ger en fördel i CPU-intensiva operationer. För en typisk React Native-applikation, där UI-uppdateringar och navigering utgör huvudbelastningen, ger Hermes en bättre användarupplevelse tack vare snabb start.

Hermes optimeringar för React Native

Hermes innehåller flera optimeringar specifika för React Native. Den främsta av dem är integration med JSI (JavaScript Interface). Hermes stöder JSI native, vilket gör det möjligt att använda den nya arkitekturen för React Native (Fabric + Turbo Module) utan extra lager. Detta gör Hermes och den nya arkitekturen till ett idealiskt par för maximal prestanda.

Minneshantering

Hermes använder en sophämtare med generationsstrategi (generational GC), optimerad för mobila enheter. Till skillnad från JSC, där sophämtning kan orsaka märkbara pauser i UI (jank), utför Hermes GC i små portioner mellan bildrutorna, vilket minimerar påverkan på användarupplevelsen. Enligt Meta är GC-pauser i Hermes 2–3 gånger kortare än i JSC i typiska React Native-scenarier.

Lazy loading och konstanter

Hermes stöder lazy loading av moduler — JavaScript-modulen kompileras endast när den verkligen behövs. Detta minskar storleken på bytekoden och påskyndar starten. Dessutom beräknar Hermes konstanta uttryck i kompileringsfasen och ersätter funktionsanrop med konstanta värden där det är möjligt.

// Exempel på Hermes-specifika optimeringar

// 1. Hermes inline-ar konstanta uttryck
const TAX_RATE = 0.07;
const price = 100;
// Hermes förberäknar: TAX_RATE * price under kompilering
const totalWithTax = price * (1 + TAX_RATE);

// 2. Hermes optimerar egenskapsåtkomstkedjor
const config = { api: { timeout: 5000 } };
// Hermes cachar config.api-åtkomst internt
const timeout = config.api.timeout;
fetch(url, { timeout });

Det är viktigt att notera att Hermes stöder debugging via Chrome DevTools (från och med Hermes version 0.12). Utvecklaren kan använda välbekanta verktyg: brytpunkter, minnesprofilering, variabelinspektion. Detta eliminerar en av de främsta invändningarna mot Hermes i tidiga versioner, när debugging var begränsad.

Konfigurera Hermes i ett React Native-projekt

Konfigurationen av Hermes beror på React Native-versionen. Från och med React Native 0.70 är Hermes aktiverad som standard för nya projekt. För tidigare skapade projekt eller vid behov av att växla mellan motorer, görs konfigurationen via bygginställningarna.

Konfiguration för Android

För Android aktiveras Hermes i filen android/app/build.gradle via flaggan hermesEnabled. För iOS görs konfigurationen i Podfile via variabeln :hermes_enabled. Efter ändring av konfigurationen måste pods installeras om och projektet byggas om.

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

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

För att kontrollera om Hermes används i applikationen, kör adb logcat | grep Hermes på Android eller kontrollera Xcode-konsolen på iOS. När applikationen startar visar Hermes meddelandet “Hermes VM initialized” eller liknande. Du kan också köra globalThis.HermesInternal i JavaScript-kod — om Hermes är aktiv kommer denna egenskap att vara tillgänglig.

// Kontrollera om Hermes körs
if (typeof globalThis.HermesInternal !== 'undefined') {
  console.log('✅ Hermes-motorn aktiv');
  console.log(
    'Version:',
    globalThis.HermesInternal.getEngineProperties()
  );
} else {
  console.log('❌ Hermes inte aktiv (återgång till JSC)');
}