Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju.

React Native 0.70 je izašao, a Hermes je novi zadani JavaScript mehanizam koji se isporučuje s ovim ažuriranjem. Evo što možete očekivati ​​od Hermesa i neke značajke koje će utjecati na performanse vaše React Native aplikacije.

Što je Hermes?

Hermes je JavaScript mehanizam otvorenog koda koji optimizira performanse tijekom iOS-a i Androida aplikacija se pokreće prethodnim kompajliranjem JavaScript koda u učinkovit bajt kod i smanjenjem aplikacije korištenje memorije.

Ažuriranje starijih izvornih verzija Reacta za podršku Hermesu

React Native aplikacije koje rade na 0.70 imat će Hermes omogućen prema zadanim postavkama. Za starije React Native aplikacije, Hermesova verzija isporučuje se sa svakom verzijom React Native počevši od verzije 0.60.4 za Android verzije i verzije 0.64.0 za iOS. Podudarne verzije eliminiraju rizik od neusklađenosti ovisnosti u vašoj React Native aplikaciji.

instagram viewer

Da biste omogućili Hermes u ovim starijim verzijama React Nativea, morat ćete dodati neke konfiguracije svojim Android i iOS aplikacijama.

Na Androidu uredite svoje android/app/build.gradle datoteka:

project.ext.react = [
 ulazna datoteka: "index.js",
 omogući Hermes: pravi// očistiti i obnoviti ako se mijenja
]

Na iOS-u možete unijeti sljedeće promjene u svoj ios/Podfile:

use_react_native!(
 :put => config[:reactNativePath],
 :hermes_enabled => pravi
)

iOS zahtijeva da instalirate Hermes podove nakon konfiguriranja postavki.

Pokrenite sljedeću naredbu za instaliranje podova:

cd ios && pod instalirati

Omogućavanje Hermesa uz Expo

Također možete koristiti Hermesov mehanizam za React Native aplikacije izgrađene ili pokrenute pomoću Expo-a. Expo biblioteka podržava Hermes od SDK verzije 42 na Androidu i SDK verzije 43 na iOS-u do trenutne verzije 0.70. Važno je napomenuti da samostalne aplikacije ne mogu pokrenuti Hermes osim ako nisu izgrađene pomoću Expo Application Services Build-a.

Da biste omogućili Hermes u aplikaciji React Native, uredite svoj app.json datoteka:

{
"ekspo": {
"jsEngine": "Hermes"
 }
}

Sada će vaša aplikacija izrađena s Expo Application Services imati omogućen Hermes kao JavaScript mehanizam.

Hermesova optimizacija performansi za izvorne aplikacije React

Većina JavaScript motora analizira sav JavaScript izvorni kod pomoću JIT (Just in Time) sustava kompilacije. JIT sustav usporava izvođenje jer vaš uređaj mora čekati da se završi cijeli proces kompilacije. Hermes koristi pristup prijevremene kompilacije (AOT), prenoseći većinu napornog rada JavaScript motora na vrijeme izgradnje.

Hermes uglavnom utječe na tri metrike izvedbe aplikacije: TTI aplikacije (Time to Interactive), binarnu veličinu i korištenje memorije.

Vrijeme je za interaktivnost

TTI je vrijeme koje je potrebno aplikaciji da učita i podrži korisničku interakciju poput pomicanja ili tipkanja. Hermes poboljšava prosječni TTI za React Native aplikacije u usporedbi s drugim JavaScript motorima.

Ovo smanjenje TTI-ja je zato što Hermes ne pokreće JIT kompajler.

Binarna veličina

Binarna veličina je veličina React Native aplikacije u paketu. Android aplikacije koriste APK format datoteke, dok iOS aplikacije koriste format koji Apple naziva IPA. Korištenje Hermesa značajno smanjuje veličinu aplikacije na Android uređajima.

Upotreba memorije

Korištenje memorije još je jedna kritična metrika koju treba optimizirati u aplikacijama. Na korisničko iskustvo aplikacije negativno bi utjecalo ako koristi previše memorije. Hermes implementira sustav sakupljača smeća koji regulira korištenje memorije na zahtjev, osiguravajući da aplikacija koristi samo potreban memorijski prostor dok radi.

Hermes dolazi s novim iskustvom za otklanjanje pogrešaka u React Native aplikacijama koje se izvode na emulatoru, simulatoru ili fizičkom uređaju koristeći Expo. Hermes podržava otklanjanje pogrešaka React Native aplikacija pomoću Chrome DevTools Inspector Protocol. Ne smijete ovo brkati s tradicionalnim Otklanjanje pogrešaka u JavaScriptu pomoću konzole preglednika.

Da biste konfigurirali Chrome za otklanjanje pogrešaka u Hermesovim aplikacijama, slijedite ove korake.

  1. Idite do krom: // pregledati unutar vašeg preglednika Chrome.
  2. Klikni na Konfigurirati dugme.
  3. Unutar modala na zaslonu unesite adresu poslužitelja za metro bundler koji pokreće vašu React Native aplikaciju i kliknite Gotovo.

Sada možete debugirati svoju React Native aplikaciju koristeći Hermesov link za pregled cilja.

Zašto je Hermes optimiziran samo za React Native

Hermesova optimalna izvedba kao React Native JavaScript motora djelomično se svodi na njegovo okruženje za vrijeme izvođenja. U React Nativeu skupljate sav JavaScript kod unutar okruženja aplikacije. Ovaj sustav čini dostavu bajt koda učinkovitom.

Drugi faktor koji treba uzeti u obzir je količina posla obavljenog tijekom JavaScript kompilacije. Hermes upravlja čestom interakcijom korisnika koja se očekuje od mobilnih aplikacija izbjegavajući agresivnu optimizaciju bajt koda. JIT prevodilac JavaScript motor ne bi izvršavao zadatke na ovaj način.