Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon.
React Native 0.70 er ute, og Hermes er den nye standard JavaScript-motoren som leveres med denne oppdateringen. Her er hva du kan forvente av Hermes og noen av funksjonene som vil påvirke ytelsen til React Native-applikasjonen din.
Hva er Hermes?
Hermes er en åpen kildekode JavaScript-motor som optimaliserer ytelsen under iOS og Android applikasjonen lanseres ved å forhåndskompilere JavaScript-kode til effektiv bytekode og redusere applikasjonen minnebruk.
Oppdaterer eldre React Native-versjoner for å støtte Hermes
React Native-applikasjoner som kjører på 0.70 vil ha Hermes aktivert som standard. For eldre React Native-applikasjoner leveres en Hermes-bygg med hver React Native-versjon fra og med versjon 0.60.4 for Android-bygg og versjon 0.64.0 for iOS. De samsvarende versjonene eliminerer risikoen for avhengighetsmismatch i React Native-applikasjonen din.
For å aktivere Hermes i disse eldre versjonene av React Native, må du legge til noe konfigurasjon til både Android- og iOS-applikasjonene dine.
På Android, rediger din android/app/build.gradle fil:
project.ext.react = [
entryFile: "index.js",
aktivere Hermes: ekte// Rengjør og gjenoppbygg hvis du endrer
]
På iOS gjør du følgende endringer i din ios/Podfile:
use_react_native!(
:bane => config[:reactNativePath],
:hermes_enabled => ekte
)
iOS krever at du installerer Hermes pods etter å ha konfigurert innstillingene.
Kjør følgende kommando for å installere podene:
cd ios && pod installering
Aktiverer Hermes med Expo
Du kan også bruke Hermes-motoren for React Native-applikasjoner bygget eller kjørt med Expo. Expo-biblioteket støtter Hermes fra SDK versjon 42 på Android og SDK versjon 43 på iOS til gjeldende versjon 0.70. Det er viktig å merke seg at frittstående applikasjoner ikke kan kjøre Hermes med mindre de er bygget med Expo Application Services Build.
For å aktivere Hermes i en React Native-applikasjon, rediger din app.json fil:
{
"utstilling": {
"jsEngine": "hermes"
}
}
Nå vil applikasjonen din bygget med Expo Application Services ha Hermes aktivert som JavaScript-motor.
Hermes ytelsesoptimalisering for React Native-apper
De fleste JavaScript-motorer analyserer all JavaScript-kildekoden ved å bruke et JIT-kompileringssystem (Just in Time). JIT-systemet reduserer kjøringen fordi enheten må vente på at hele kompileringsprosessen er fullført. Hermes bruker en AOT-tilnærming (ahead-of-time compilation), og overfører det meste av det tunge JavaScript-motorarbeidet til å bygge tid.
Hermes påvirker hovedsakelig tre beregninger for applikasjonsytelse: applikasjonens TTI (Time to Interactive), binær størrelse og minnebruk.
Tid til interaktiv
TTI er tiden det tar en app å laste og støtte brukerinteraksjon som å rulle eller skrive. Hermes forbedrer den gjennomsnittlige TTI for React Native-applikasjoner sammenlignet med andre JavaScript-motorer.
Denne reduksjonen i TTI er fordi Hermes ikke kjører en JIT-kompilator.
Binær størrelse
Den binære størrelsen er størrelsen på den medfølgende React Native-applikasjonen. Android-applikasjoner bruker APK-filformat, mens iOS-apper bruker et format Apple kaller IPA. Bruk av Hermes reduserer applikasjonsstørrelsen på Android-enheter betydelig.
Minnebruk
Minnebruk er en annen kritisk beregning for å optimalisere i applikasjoner. En applikasjons brukeropplevelse vil bli negativt påvirket hvis den bruker for mye minne. Hermes implementerer et Garbage Collector-system som regulerer minnebruk på forespørsel, og sikrer at en applikasjon bare bruker nødvendig minneplass mens den kjører.
Hermes kommer med en ny opplevelse for feilsøking av React Native-applikasjoner som kjører på en emulator, simulator eller fysisk enhet ved hjelp av Expo. Hermes støtter feilsøking av React Native-applikasjoner ved hjelp av Chrome DevTools sin Inspector Protocol. Du bør ikke forveksle dette med tradisjonelle JavaScript-feilsøking ved hjelp av nettleserens konsoll.
Følg disse trinnene for å konfigurere Chrome til å feilsøke Hermes-applikasjoner.
- Navigere til chrome://inspiser i Chrome-nettleseren din.
- Klikk på Konfigurer knapp.
- Inne i skjermmodalen, skriv inn serveradressen for metrobunteren som kjører React Native-applikasjonen din, og klikk Ferdig.
Du kan nå feilsøke React Native-applikasjonen din ved å bruke Hermes-målinspeksjonslenken.
Hvorfor Hermes er optimalisert for bare React Native
Hermes' optimale ytelse som en React Native JavaScript-motor er delvis på grunn av kjøretidsmiljøet. I React Native pakker du all JavaScript-kode i applikasjonsmiljøet. Dette systemet gjør fraktbytekode effektiv.
En annen faktor å vurdere er mengden arbeid som gjøres under JavaScript-kompilering. Hermes administrerer den hyppige brukerinteraksjonen som forventes av mobilapplikasjoner, samtidig som den unngår aggressiv bytekodeoptimalisering. En JIT-kompilator JavaScript-motor ville ikke utføre oppgaver på denne måten.
