Čo môžete očakávať od Hermes Engine v React Native 0.70

Čo môžete očakávať od Hermes Engine v React Native 0.70
Č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 spúšťania aplikácií pre iOS a Android predkompilovaním kódu JavaScript do efektívneho bajtkódu a znížením využitia pamäte aplikácie.



čo znamená, že sim neposkytuje mm 2
VYUŽITIE VIDEA DŇA

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.

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



project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

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

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

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 install

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.

Ladenie React Native s Hermes a Chrome DevTools

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špekčné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.

ako obnoviť zmazanú fotografiu v systéme Android
  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.