I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
React Native 0.70 è uscito e Hermes è il nuovo motore JavaScript predefinito fornito con questo aggiornamento. Ecco cosa aspettarsi da Hermes e alcune delle funzionalità che influenzeranno le prestazioni della tua applicazione React Native.
Cos'è Ermes?
Hermes è un motore JavaScript open source che ottimizza le prestazioni durante iOS e Android l'applicazione viene avviata precompilando il codice JavaScript in bytecode efficiente e riducendo application utilizzo della memoria.
Aggiornamento delle vecchie versioni native di React per supportare Hermes
Le applicazioni React Native in esecuzione su 0.70 avranno Hermes abilitato per impostazione predefinita. Per le applicazioni React Native meno recenti, una build di Hermes viene fornita con ogni versione di React Native a partire dalla versione 0.60.4 per build Android e dalla versione 0.64.0 per iOS. Le versioni corrispondenti eliminano il rischio di una mancata corrispondenza delle dipendenze nella tua applicazione React Native.
Per abilitare Hermes in queste versioni precedenti di React Native, dovrai aggiungere alcune configurazioni alle tue applicazioni Android e iOS.
Su Android, modifica il tuo android/app/build.gradle file:
progetto.ext.react = [
voceFile: "index.js",
abilitaHermes: VERO// pulisce e ricostruisce se cambia
]
Su iOS, apporti le seguenti modifiche al tuo file ios/Podfile:
use_react_native!(
:percorso => config[:reactNativePath],
:hermes_enabled => VERO
)
iOS richiede l'installazione dei pod Hermes dopo aver configurato le impostazioni.
Esegui il seguente comando per installare i pod:
cd ios && installazione del pod
Abilitare Hermes con Expo
Puoi anche utilizzare il motore Hermes per le applicazioni React Native create o eseguite utilizzando Expo. La libreria Expo supporta Hermes dalla versione 42 dell'SDK su Android e dalla versione 43 dell'SDK su iOS fino all'attuale versione 0.70. È importante notare che le applicazioni autonome non possono eseguire Hermes a meno che non siano state create utilizzando Expo Application Services Build.
Per abilitare Hermes in un'applicazione React Native, modifica il tuo app.json file:
{
"expo": {
"jsEngine": "Ermete"
}
}
Ora la tua applicazione creata con Expo Application Services avrà Hermes abilitato come motore JavaScript.
Ottimizzazione delle prestazioni di Hermes per le app native React
La maggior parte dei motori JavaScript analizza tutto il codice sorgente JavaScript utilizzando un sistema di compilazione JIT (Just in Time). Il sistema JIT rallenta l'esecuzione perché il dispositivo deve attendere il completamento dell'intero processo di compilazione. Hermes utilizza un approccio di compilazione anticipata (AOT), trasferendo la maggior parte del lavoro pesante del motore JavaScript per costruire il tempo.
Hermes influisce principalmente su tre metriche delle prestazioni dell'applicazione: l'applicazione TTI (Time to Interactive), la dimensione binaria e l'utilizzo della memoria.
Tempo di interattivo
Il TTI è il tempo necessario a un'app per caricare e supportare l'interazione dell'utente come lo scorrimento o la digitazione. Hermes migliora il TTI medio per le applicazioni React Native rispetto ad altri motori JavaScript.
Questa riduzione di TTI è dovuta al fatto che Hermes non esegue un compilatore JIT.
Dimensione binaria
La dimensione binaria è la dimensione dell'applicazione React Native in bundle. Le applicazioni Android utilizzano il Formato file APK, mentre le app iOS utilizzano un formato che Apple chiama IPA. L'utilizzo di Hermes riduce notevolmente le dimensioni dell'applicazione sui dispositivi Android.
Utilizzo della memoria
L'utilizzo della memoria è un'altra metrica critica da ottimizzare nelle applicazioni. L'esperienza utente di un'applicazione ne risentirebbe negativamente se utilizza troppa memoria. Hermes implementa un sistema Garbage Collector che regola l'utilizzo della memoria su richiesta, garantendo che un'applicazione utilizzi solo lo spazio di memoria necessario durante l'esecuzione.
Hermes offre una nuova esperienza per il debug delle applicazioni React Native in esecuzione su un emulatore, simulatore o dispositivo fisico utilizzando Expo. Hermes supporta il debug delle applicazioni React Native utilizzando il protocollo Inspector di Chrome DevTools. Non dovresti confondere questo con il tradizionale Debug JavaScript utilizzando la console del browser.
Per configurare Chrome per eseguire il debug delle applicazioni Hermes, procedi nel seguente modo.
- Navigare verso chrome://inspect all'interno del tuo browser Chrome.
- Clicca sul Configura pulsante.
- All'interno del modale sullo schermo, inserisci l'indirizzo del server per il metro bundler che esegue la tua applicazione React Native e fai clic Fatto.
Ora puoi eseguire il debug della tua applicazione React Native utilizzando il collegamento di ispezione del target di Hermes.
Perché Hermes è ottimizzato solo per React Native
Le prestazioni ottimali di Hermes come motore JavaScript nativo di React dipendono in parte dal suo ambiente di runtime. In React Native, raggruppi tutto il codice JavaScript all'interno dell'ambiente dell'applicazione. Questo sistema rende efficiente il bytecode di spedizione.
Un altro fattore da considerare è la quantità di lavoro svolto durante la compilazione JavaScript. Hermes gestisce la frequente interazione dell'utente prevista dalle applicazioni mobili evitando un'aggressiva ottimizzazione del bytecode. Un motore JavaScript del compilatore JIT non eseguirà le attività in questo modo.