Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
React Native 0.70 ist da und Hermes ist die neue Standard-JavaScript-Engine, die mit diesem Update ausgeliefert wird. Hier ist, was Sie von Hermes erwarten können und einige der Funktionen, die sich auf die Leistung Ihrer React Native-Anwendung auswirken.
Was ist Hermes?
Hermes ist eine Open-Source-JavaScript-Engine, die die Leistung unter iOS und Android optimiert Anwendungsstarts durch Vorkompilieren von JavaScript-Code in effizienten Bytecode und Reduzierung der Anwendung Speichernutzung.
Aktualisierung älterer nativer React-Versionen zur Unterstützung von Hermes
React Native-Anwendungen, die auf 0.70 ausgeführt werden, haben Hermes standardmäßig aktiviert. Für ältere React Native-Anwendungen wird ein Hermes-Build mit jeder React Native-Version ausgeliefert, beginnend mit Version 0.60.4 für Android-Builds und Version 0.64.0 für iOS. Die übereinstimmenden Versionen eliminieren das Risiko eines Abhängigkeitskonflikts in Ihrer React Native-Anwendung.
Um Hermes in diesen älteren Versionen von React Native zu aktivieren, müssen Sie sowohl Ihren Android- als auch Ihren iOS-Anwendungen einige Konfigurationen hinzufügen.
Bearbeiten Sie auf Android Ihre android/app/build.gradle Datei:
project.ext.react = [
Eintragsdatei: "index.js",
enableHermes: WAHR// bei Änderung reinigen und neu erstellen
]
Unter iOS nehmen Sie die folgenden Änderungen an Ihrer vor ios/Pod-Datei:
use_react_native!(
:pfad=> config[:reactNativePath],
:hermes_enabled => WAHR
)
iOS erfordert, dass Sie Hermes-Pods nach dem Konfigurieren der Einstellungen installieren.
Führen Sie den folgenden Befehl aus, um die Pods zu installieren:
cd ios && Pod installieren
Hermes mit Expo aktivieren
Sie können die Hermes-Engine auch für React Native-Anwendungen verwenden, die mit Expo erstellt oder ausgeführt werden. Die Expo-Bibliothek unterstützt Hermes ab SDK-Version 42 auf Android und SDK-Version 43 auf iOS bis zur aktuellen Version 0.70. Es ist wichtig zu beachten, dass eigenständige Anwendungen Hermes nicht ausführen können, es sei denn, sie wurden mit Expo Application Services Build erstellt.
Um Hermes in einer React Native-Anwendung zu aktivieren, bearbeiten Sie Ihre app.json Datei:
{
"Messe": {
"jsEngine": "Hermes"
}
}
Jetzt wird für Ihre mit Expo Application Services erstellte Anwendung Hermes als JavaScript-Engine aktiviert.
Hermes Performance-Optimierung für React Native Apps
Die meisten JavaScript-Engines analysieren den gesamten JavaScript-Quellcode mit einem JIT-Kompilierungssystem (Just in Time). Das JIT-System verlangsamt die Ausführung, da Ihr Gerät warten muss, bis der gesamte Kompilierungsprozess abgeschlossen ist. Hermes verwendet einen AOT-Ansatz (Ahead-of-Time Compilation), bei dem der Großteil der Arbeit der Hochleistungs-JavaScript-Engine in die Build-Zeit verlagert wird.
Hermes beeinflusst hauptsächlich drei Metriken der Anwendungsleistung: die Anwendungs-TTI (Time to Interactive), die Binärgröße und die Speichernutzung.
Zeit für Interaktivität
Die TTI ist die Zeit, die eine App benötigt, um Benutzerinteraktionen wie Scrollen oder Tippen zu laden und zu unterstützen. Hermes verbessert die durchschnittliche TTI für React Native-Anwendungen im Vergleich zu anderen JavaScript-Engines.
Diese TTI-Reduzierung ist darauf zurückzuführen, dass Hermes keinen JIT-Compiler ausführt.
Binäre Größe
Die Binärgröße ist die Größe der gebündelten React Native-Anwendung. Android-Anwendungen verwenden die APK-Dateiformat, während iOS-Apps ein Format verwenden, das Apple IPA nennt. Die Verwendung von Hermes reduziert die Anwendungsgröße auf Android-Geräten erheblich.
Speichernutzung
Die Speichernutzung ist eine weitere wichtige Metrik, die in Anwendungen optimiert werden muss. Die Benutzererfahrung einer Anwendung würde negativ beeinflusst, wenn sie zu viel Speicher verwendet. Hermes implementiert ein Garbage Collector-System, das die Speichernutzung nach Bedarf regelt und sicherstellt, dass eine Anwendung während der Ausführung nur den erforderlichen Speicherplatz verwendet.
Hermes bietet eine neue Erfahrung zum Debuggen von React Native-Anwendungen, die auf einem Emulator, Simulator oder physischen Gerät mit Expo ausgeführt werden. Hermes unterstützt das Debuggen von React Native-Anwendungen mit dem Inspector-Protokoll von Chrome DevTools. Sie sollten dies nicht mit traditionell verwechseln JavaScript-Debugging über die Konsole des Browsers.
Führen Sie die folgenden Schritte aus, um Chrome für das Debuggen von Hermes-Anwendungen zu konfigurieren.
- Navigieren Sie zu chrome://inspect in Ihrem Chrome-Browser.
- Klick auf das Konfigurieren Taste.
- Geben Sie im Bildschirmmodal die Serveradresse für den Metro-Bundler ein, auf dem Ihre React Native-Anwendung ausgeführt wird, und klicken Sie auf Erledigt.
Sie können jetzt Ihre React Native-Anwendung mit dem Hermes-Zielprüfungslink debuggen.
Warum Hermes nur für React Native optimiert ist
Die optimale Leistung von Hermes als React-Native-JavaScript-Engine ist zum Teil auf seine Laufzeitumgebung zurückzuführen. In React Native bündeln Sie den gesamten JavaScript-Code innerhalb der Anwendungsumgebung. Dieses System macht den Versand von Bytecode effizient.
Ein weiterer zu berücksichtigender Faktor ist der Arbeitsaufwand während der JavaScript-Kompilierung. Hermes verwaltet die häufigen Benutzerinteraktionen, die von mobilen Anwendungen erwartet werden, und vermeidet gleichzeitig eine aggressive Bytecode-Optimierung. Eine JIT-Compiler-JavaScript-Engine würde Aufgaben auf diese Weise nicht ausführen.