Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.

React Native 0.70 je izšel in Hermes je nov privzeti mehanizem JavaScript, ki se pošilja s to posodobitvijo. Tukaj je opisano, kaj lahko pričakujete od Hermesa in nekatere funkcije, ki bodo vplivale na delovanje vaše aplikacije React Native.

Kaj je Hermes?

Hermes je odprtokodni mehanizem JavaScript, ki optimizira delovanje v sistemih iOS in Android aplikacija se zažene s predprevajanjem kode JavaScript v učinkovito bajtno kodo in zmanjša aplikacijo uporaba pomnilnika.

Posodabljanje starejših izvornih različic Reacta za podporo Hermesu

Pri aplikacijah React Native, ki se izvajajo na 0.70, bo Hermes privzeto omogočen. Za starejše aplikacije React Native je Hermesova zgradba priložena vsaki različici React Native, začenši z različico 0.60.4 za različice Android in različico 0.64.0 za iOS. Ujemajoče se različice odpravijo tveganje neujemanja odvisnosti v vaši aplikaciji React Native.

instagram viewer

Če želite omogočiti Hermes v teh starejših različicah React Native, boste morali dodati nekaj konfiguracije aplikacijama za Android in iOS.

V sistemu Android uredite svoje android/app/build.gradle mapa:

project.ext.react = [
 vstopna datoteka: "index.js",
 omogoči Hermes: prav// očisti in obnovi, če se spremeni
]

V sistemu iOS naredite naslednje spremembe v svojem ios/Podfile:

use_react_native!(
 :pot => config[:reactNativePath],
 :hermes_enabled => prav
)

iOS zahteva, da po konfiguraciji nastavitev namestite pods Hermes.

Zaženite naslednji ukaz za namestitev podov:

cd ios && namestitev pod

Omogočanje Hermesa z Expo

Motor Hermes lahko uporabite tudi za aplikacije React Native, zgrajene ali zagnane s pomočjo Expo. Knjižnica Expo podpira Hermes od različice SDK 42 za Android in različice SDK 43 za iOS do trenutne različice 0.70. Pomembno je omeniti, da samostojne aplikacije ne morejo zagnati Hermesa, razen če so izdelane z uporabo Expo Application Services Build.

Če želite omogočiti Hermes v aplikaciji React Native, uredite svoj app.json mapa:

{
"razstava": {
"jsEngine": "hermes"
 }
}

Zdaj bo vaša aplikacija, izdelana z Expo Application Services, imela omogočen Hermes kot motor JavaScript.

Hermesova optimizacija zmogljivosti za izvorne aplikacije React

Večina mehanizmov JavaScript razčleni vso izvorno kodo JavaScript s sistemom prevajanja JIT (pravočasno). Sistem JIT upočasni izvajanje, ker mora vaša naprava počakati, da se zaključi celoten postopek prevajanja. Hermes uporablja pristop vnaprejšnje kompilacije (AOT), s čimer prenese večino težkega dela mehanizma JavaScript na čas gradnje.

Hermes vpliva predvsem na tri metrike delovanja aplikacije: TTI aplikacije (Time to Interactive), binarno velikost in porabo pomnilnika.

Čas za interaktivnost

TTI je čas, ki ga aplikacija potrebuje, da naloži in podpre uporabniško interakcijo, kot je drsenje ali tipkanje. Hermes izboljša povprečni TTI za aplikacije React Native v primerjavi z drugimi motorji JavaScript.

To zmanjšanje TTI je zato, ker Hermes ne izvaja prevajalnika JIT.

Binarna velikost

Binarna velikost je velikost priložene aplikacije React Native. Aplikacije za Android uporabljajo Format datoteke APK, medtem ko aplikacije za iOS uporabljajo format, ki ga Apple imenuje IPA. Uporaba Hermesa znatno zmanjša velikost aplikacije na napravah Android.

Poraba pomnilnika

Poraba pomnilnika je še ena kritična metrika za optimizacijo v aplikacijah. Uporabniška izkušnja aplikacije bi negativno vplivala, če uporablja preveč pomnilnika. Hermes implementira sistem Garbage Collector, ki uravnava uporabo pomnilnika na zahtevo in zagotavlja, da aplikacija med delovanjem uporablja samo potreben pomnilniški prostor.

Hermes prihaja z novo izkušnjo za odpravljanje napak v aplikacijah React Native, ki se izvajajo na emulatorju, simulatorju ali fizični napravi z uporabo Expo. Hermes podpira odpravljanje napak v aplikacijah React Native s protokolom Inspector za Chrome DevTools. Tega ne smete zamenjevati s tradicionalnim Odpravljanje napak v JavaScriptu s konzolo brskalnika.

Če želite Chrome konfigurirati za odpravljanje napak v aplikacijah Hermes, sledite tem korakom.

  1. Pojdite na chrome://inspect v brskalniku Chrome.
  2. Kliknite na Konfiguriraj gumb.
  3. Znotraj modala na zaslonu vnesite naslov strežnika za metro povezovalca, ki izvaja vašo aplikacijo React Native, in kliknite Končano.

Zdaj lahko odpravljate napake v svoji aplikaciji React Native s povezavo Hermes target inspect.

Zakaj je Hermes optimiziran samo za React Native

Optimalna zmogljivost Hermesa kot motorja React Native JavaScript je delno odvisna od njegovega izvajalnega okolja. V React Native združite vso kodo JavaScript znotraj aplikacijskega okolja. Ta sistem omogoča učinkovito pošiljanje bajtne kode.

Drug dejavnik, ki ga je treba upoštevati, je količina dela, opravljenega med prevajanjem JavaScripta. Hermes upravlja pogosto uporabniško interakcijo, ki je pričakovana za mobilne aplikacije, hkrati pa se izogiba agresivni optimizaciji bajtne kode. Motor JavaScript prevajalnik JIT ne bi izvajal nalog na ta način.