Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.

React Native 0.70 je venku a Hermes je nový výchozí JavaScript engine dodávaný s touto aktualizací. Zde je to, co můžete od Hermes očekávat, a některé funkce, které ovlivní výkon vaší aplikace React Native.

Co je Hermes?

Hermes je open-source JavaScript engine, který optimalizuje výkon během iOS a Android aplikace se spouští předkompilací kódu JavaScript do efektivního bajtkódu a redukcí aplikace využití paměti.

Aktualizace starších verzí React Native na podporu Hermes

Aplikace React Native běžící na 0.70 budou mít ve výchozím nastavení povolený Hermes. U starších aplikací React Native se sestavení Hermes dodává s každou verzí React Native počínaje verzí 0.60.4 pro sestavení Android a verzí 0.64.0 pro iOS. Odpovídající verze eliminují riziko nesouladu závislostí ve vaší aplikaci React Native.

Chcete-li povolit Hermes v těchto starších verzích React Native, budete muset přidat určitou konfiguraci do aplikací pro Android i iOS.

instagram viewer

V systému Android upravte svůj android/app/build.gradle soubor:

project.ext.react = [
 vstupníSoubor: "index.js",
 povolit Hermes: skutečný// v případě změny vyčistit a znovu sestavit
]

V systému iOS provedete následující změny ios/Podfile:

use_react_native!(
 :cesta => config[:reactNativePath],
 :hermes_enabled => skutečný
)

iOS vyžaduje, abyste si po konfiguraci nastavení nainstalovali Hermes pody.

Spusťte následující příkaz k instalaci podů:

cd ios && instalace pod

Povolení Hermes s Expo

Engine Hermes můžete také použít pro aplikace React Native vytvořené nebo spouštěné pomocí Expo. Knihovna Expo podporuje Hermes od verze SDK 42 pro Android a SDK verze 43 pro iOS až po aktuální verzi 0.70. Je důležité si uvědomit, že samostatné aplikace nemohou spustit Hermes, pokud nejsou vytvořeny pomocí Expo Application Services Build.

Chcete-li povolit Hermes v aplikaci React Native, upravte svůj app.json soubor:

{
"expo": {
"jsEngine": "hermes"
 }
}

Nyní bude vaše aplikace vytvořená pomocí Expo Application Services mít povolený Hermes jako svůj JavaScript engine.

Hermes Performance Optimization pro React Native Apps

Většina JavaScript motorů analyzuje veškerý zdrojový kód JavaScriptu pomocí kompilačního systému JIT (Just in Time). Systém JIT zpomaluje provádění, protože vaše zařízení musí čekat na dokončení celého procesu kompilace. Hermes používá přístup předčasné kompilace (AOT), který přenáší většinu práce náročného JavaScriptového enginu na čas sestavení.

Hermes ovlivňuje především tři metriky výkonu aplikace: aplikaci TTI (Time to Interactive), binární velikost a využití paměti.

Čas na interaktivitu

TTI je doba, kterou aplikaci trvá načtení a podpora uživatelské interakce, jako je posouvání nebo psaní. Hermes zlepšuje průměrné TTI pro aplikace React Native ve srovnání s jinými JavaScriptovými motory.

Toto snížení TTI je způsobeno tím, že Hermes nespouští kompilátor JIT.

Binární velikost

Binární velikost je velikost přibalené aplikace React Native. Aplikace pro Android používají Formát souboru APK, zatímco aplikace pro iOS používají formát, který Apple nazývá IPA. Používání Hermes výrazně snižuje velikost aplikací na zařízeních Android.

Využití paměti

Využití paměti je další kritickou metrikou pro optimalizaci v aplikacích. Uživatelská zkušenost aplikace by byla negativně ovlivněna, pokud by používala příliš mnoho paměti. Hermes implementuje systém Garbage Collector, který reguluje využití paměti na vyžádání a zajišťuje, že aplikace při běhu využívá pouze potřebný paměťový prostor.

Hermes přichází s novým zážitkem pro ladění aplikací React Native běžících na emulátoru, simulátoru nebo fyzickém zařízení pomocí Expo. Hermes podporuje ladění aplikací React Native pomocí Inspector Protocol Chrome DevTools. Neměli byste si to plést s tradičními Ladění JavaScriptu pomocí konzoly prohlížeče.

Chcete-li nakonfigurovat Chrome pro ladění aplikací Hermes, postupujte takto.

  1. Navigovat do chrome://inspect v prohlížeči Chrome.
  2. Klikněte na Konfigurovat knoflík.
  3. Uvnitř modálu na obrazovce zadejte adresu serveru pro metro bundler, na kterém běží vaše aplikace React Native, a klikněte Hotovo.

Nyní můžete svou aplikaci React Native ladit pomocí odkazu Hermes target inspect.

Proč je Hermes optimalizován pouze pro React Native

Optimální výkon Hermes jako enginu React Native JavaScript je částečně způsoben jeho běhovým prostředím. V React Native sdružujete veškerý kód JavaScript v prostředí aplikace. Tento systém zefektivňuje přepravní bytecode.

Dalším faktorem, který je třeba vzít v úvahu, je množství práce vykonané během kompilace JavaScriptu. Hermes spravuje častou uživatelskou interakci očekávanou u mobilních aplikací a zároveň se vyhýbá agresivní optimalizaci bajtového kódu. JavaScript kompilátor JIT by tímto způsobem neprováděl úkoly.