Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu.

React Native 0.70 je vonku a Hermes je nový predvolený nástroj JavaScript dodávaný s touto aktualizáciou. Tu je to, čo môžete očakávať od Hermes a niektoré funkcie, ktoré ovplyvnia výkon vašej aplikácie React Native.

Čo je Hermes?

Hermes je open-source JavaScript engine, ktorý optimalizuje výkon počas iOS a Androidu aplikácia sa spúšťa predkompiláciou kódu JavaScript do efektívneho bajtkódu a redukciou aplikácie Využitie pamäte.

Aktualizácia starších verzií React Native na podporu Hermes

Aplikácie React Native bežiace na 0.70 budú mať štandardne povolený Hermes. Pre staršie aplikácie React Native sa zostava Hermes dodáva s každou verziou React Native počnúc verziou 0.60.4 pre zostavy Android a verziou 0.64.0 pre iOS. Zhodné verzie eliminujú riziko nesúladu závislostí vo vašej aplikácii React Native.

Ak chcete povoliť Hermes v týchto starších verziách React Native, budete musieť pridať určitú konfiguráciu do aplikácií pre Android aj iOS.

instagram viewer

V systéme Android upravte svoje android/app/build.gradle súbor:

project.ext.react = [
 entryFile: "index.js",
 povoliť Hermes: pravda// vyčistiť a prebudovať, ak sa zmení
]

V systéme iOS vykonáte nasledujúce zmeny ios/Podfile:

use_react_native!(
 :cesta => config[:reactNativePath],
 :hermes_enabled => pravda
)

iOS vyžaduje, aby ste si po konfigurácii nastavení nainštalovali Hermes pody.

Spustite nasledujúci príkaz na inštaláciu modulov:

cd ios && pod nainštalovať

Povolenie Hermes s Expo

Engine Hermes môžete použiť aj pre aplikácie React Native vytvorené alebo spustené pomocou Expo. Knižnica Expo podporuje Hermes od verzie SDK 42 pre Android a SDK verzie 43 pre iOS až po aktuálnu verziu 0.70. Je dôležité poznamenať, že samostatné aplikácie nemôžu spustiť Hermes, pokiaľ nie sú vytvorené pomocou Expo Application Services Build.

Ak chcete povoliť Hermes v aplikácii React Native, upravte svoj app.json súbor:

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

Teraz bude mať vaša aplikácia postavená pomocou Expo Application Services povolenú funkciu Hermes ako svoj JavaScriptový engine.

Optimalizácia výkonu Hermes pre aplikácie React Native Apps

Väčšina JavaScript motorov analyzuje všetok zdrojový kód JavaScriptu pomocou kompilačného systému JIT (Just in Time). Systém JIT spomaľuje vykonávanie, pretože vaše zariadenie musí čakať na dokončenie celého procesu kompilácie. Hermes používa prístup predčasnej kompilácie (AOT), ktorý prenáša väčšinu práce náročného JavaScriptového enginu na vytvorenie času.

Hermes ovplyvňuje najmä tri metriky výkonu aplikácie: aplikáciu TTI (Time to Interactive), binárnu veľkosť a využitie pamäte.

Čas na interaktivitu

TTI je čas, ktorý trvá aplikácii na načítanie a podporu interakcie používateľa, ako je posúvanie alebo písanie. Hermes zlepšuje priemerné TTI pre aplikácie React Native v porovnaní s inými JavaScript motormi.

Toto zníženie TTI je spôsobené tým, že Hermes nespúšťa JIT kompilátor.

Binárna veľkosť

Binárna veľkosť je veľkosť pribalenej aplikácie React Native. Aplikácie pre Android používajú Formát súboru APK, zatiaľ čo aplikácie pre iOS používajú formát, ktorý Apple nazýva IPA. Používanie Hermes výrazne znižuje veľkosť aplikácie na zariadeniach so systémom Android.

Využitie pamäte

Využitie pamäte je ďalšou kritickou metrikou na optimalizáciu v aplikáciách. Používateľská skúsenosť aplikácie by bola negatívne ovplyvnená, ak by využívala príliš veľa pamäte. Hermes implementuje systém Garbage Collector, ktorý reguluje využitie pamäte na požiadanie, čím zaisťuje, že aplikácia počas behu využíva iba potrebný pamäťový priestor.

Hermes prichádza s novým zážitkom pre ladenie aplikácií React Native bežiacich na emulátore, simulátore alebo fyzickom zariadení pomocou Expo. Hermes podporuje ladenie aplikácií React Native pomocou inšpektorského protokolu Chrome DevTools. Nemali by ste si to mýliť s tradičným Ladenie JavaScriptu pomocou konzoly prehliadača.

Ak chcete nakonfigurovať prehliadač Chrome na ladenie aplikácií Hermes, postupujte podľa týchto krokov.

  1. Prejdite na chrome://inspect v prehliadači Chrome.
  2. Klikni na Konfigurovať tlačidlo.
  3. Vo vnútri modálu na obrazovke zadajte adresu servera pre metro bundler, v ktorom je spustená vaša aplikácia React Native, a kliknite hotový.

Teraz môžete ladiť svoju aplikáciu React Native pomocou odkazu Hermes target inspect.

Prečo je Hermes optimalizovaný len pre React Native

Optimálny výkon Hermes ako React Native JavaScript engine je čiastočne spôsobený jeho runtime prostredím. V React Native spájate všetok kód JavaScript v prostredí aplikácie. Tento systém zefektívňuje prepravný bajtový kód.

Ďalším faktorom, ktorý treba zvážiť, je množstvo práce vykonanej počas kompilácie JavaScriptu. Hermes spravuje častú interakciu používateľov, ktorá sa očakáva pri mobilných aplikáciách, pričom sa vyhýba agresívnej optimalizácii bajtkódu. JavaScript kompilátor JIT nebude vykonávať úlohy týmto spôsobom.