Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk.

Megjelent a React Native 0.70, és ezzel a frissítéssel együtt a Hermes az új alapértelmezett JavaScript-motor. Íme, mire számíthatunk a Hermestől és néhány olyan funkciótól, amelyek befolyásolják a React Native alkalmazás teljesítményét.

Mi az a Hermész?

A Hermes egy nyílt forráskódú JavaScript-motor, amely optimalizálja a teljesítményt iOS és Android rendszeren Az alkalmazás úgy indul el, hogy előre lefordítja a JavaScript-kódot hatékony bájtkódba, és csökkenti az alkalmazást memóriahasználat.

Régebbi React natív verziók frissítése a Hermes támogatása érdekében

A 0.70-en futó React Native alkalmazásoknál alapértelmezés szerint engedélyezve van a Hermes. A régebbi React Native-alkalmazások esetében a Hermes build minden React Native verziót tartalmaz, kezdve a 0.60.4-es verziótól az Android-verziókhoz és a 0.64.0-s verziótól az iOS-hez. Az egyező verziók kiküszöbölik a függőségi eltérések kockázatát a React Native alkalmazásban.

instagram viewer

Ahhoz, hogy engedélyezze a Hermes használatát a React Native régebbi verzióiban, hozzá kell adnia néhány konfigurációt mind az Android, mind az iOS-alkalmazásokhoz.

Androidon szerkessze a android/app/build.gradle fájl:

project.ext.react = [
 bejegyzésfájl: "index.js",
 engedélyezése Hermes: igaz// tisztítsa meg és újjáépítse, ha változik
]

iOS rendszeren a következő módosításokat kell végrehajtania a ios/Podfile:

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

Az iOS megköveteli, hogy a beállítások konfigurálása után telepítse a Hermes podokat.

Futtassa a következő parancsot a podok telepítéséhez:

cd ios && pod telepítése

A Hermes engedélyezése az Expo segítségével

A Hermes motort az Expo segítségével épített vagy futtatott React Native alkalmazásokhoz is használhatja. Az Expo könyvtár támogatja a Hermest az SDK 42-es verziójától Androidon és az SDK 43-as verziójától iOS-en a jelenlegi 0.70-es verzióig. Fontos megjegyezni, hogy az önálló alkalmazások nem futtathatják a Hermes-t, hacsak nem az Expo Application Services Build használatával készültek.

A Hermes engedélyezéséhez egy React Native alkalmazásban módosítsa a app.json fájl:

{
"expo": {
"jsEngine": "Hermész"
 }
}

Mostantól az Expo Application Services szolgáltatással épített alkalmazásának JavaScript-motorjaként a Hermes engedélyezve lesz.

Hermes teljesítményoptimalizálás a React natív alkalmazásokhoz

A legtöbb JavaScript-motor az összes JavaScript-forráskódot JIT (Just in Time) fordítórendszer segítségével elemzi. A JIT rendszer lelassítja a végrehajtást, mert az eszköznek meg kell várnia a teljes fordítási folyamat befejeződését. A Hermes az idő előtti összeállítás (AOT) megközelítést alkalmazza, és a nagy teherbírású JavaScript-motor munka nagy részét átadja az építési időnek.

A Hermes főként az alkalmazások teljesítményének három mérőszámát érinti: az alkalmazás TTI-jét (Time to Interactive), a bináris méretet és a memóriahasználatot.

Ideje az interaktívnak

A TTI az az idő, amely alatt egy alkalmazás betöltődik, és támogatja a felhasználói interakciókat, például a görgetést vagy a gépelést. A Hermes más JavaScript-motorokhoz képest javítja a React Native alkalmazások átlagos TTI-jét.

Ez a TTI csökkenés azért van, mert a Hermes nem futtat JIT fordítót.

Bináris méret

A bináris méret a csomagban lévő React Native alkalmazás mérete. Az Android alkalmazások a APK fájlformátum, míg az iOS-alkalmazások az Apple által IPA-nak nevezett formátumot használnak. A Hermes használata jelentősen csökkenti az alkalmazások méretét Android-eszközökön.

Memóriahasználat

A memóriahasználat egy másik kritikus mérőszám, amelyet az alkalmazásokban optimalizálni kell. Egy alkalmazás felhasználói élményét negatívan befolyásolja, ha túl sok memóriát használ. A Hermes egy Garbage Collector rendszert valósít meg, amely igény szerint szabályozza a memóriahasználatot, biztosítva, hogy az alkalmazás csak a szükséges memóriaterületet használja futás közben.

A Hermes új élményt nyújt az Expo segítségével emulátoron, szimulátoron vagy fizikai eszközön futó React Native alkalmazások hibakereséséhez. A Hermes támogatja a React Native alkalmazások hibakeresését a Chrome DevTools Inspector Protocol használatával. Ezt nem szabad összetéveszteni a hagyományossal JavaScript hibakeresés a böngésző konzoljával.

A Chrome beállításához a Hermes alkalmazások hibakeresésére hajtsa végre az alábbi lépéseket.

  1. Navigáljon ide chrome://inspect a Chrome böngészőben.
  2. Kattintson a Beállítás gomb.
  3. A képernyőn megjelenő módban adja meg a React Native alkalmazást futtató metró kötegelő szerver címét, majd kattintson Kész.

Mostantól hibakeresést végezhet a React Native alkalmazásban a Hermes célellenőrzési hivatkozásával.

Miért van optimalizálva a Hermes csak a React Native számára?

A Hermes React Native JavaScript motorként nyújtott optimális teljesítménye részben a futási környezetének köszönhető. A React Native alkalmazásban az összes JavaScript-kódot kötegeli az alkalmazáskörnyezeten belül. Ez a rendszer hatékonysá teszi a bájtkód szállítását.

Egy másik figyelembe veendő tényező a JavaScript fordítása során végzett munka mennyisége. A Hermes kezeli a mobilalkalmazások által elvárt gyakori felhasználói interakciót, miközben elkerüli az agresszív bájtkód-optimalizálást. A JIT fordító JavaScript motorja nem hajtana végre feladatokat így.