Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.

React Native 0.70 jest już dostępny, a Hermes jest nowym domyślnym silnikiem JavaScript dostarczanym wraz z tą aktualizacją. Oto, czego możesz oczekiwać od Hermesa i niektórych funkcji, które wpłyną na wydajność Twojej aplikacji React Native.

Czym jest Hermes?

Hermes to silnik JavaScript typu open source, który optymalizuje wydajność w systemach iOS i Android uruchamianie aplikacji poprzez wstępną kompilację kodu JavaScript do wydajnego kodu bajtowego i redukcję aplikacji zużycie pamięci.

Aktualizacja starszych wersji React Native do obsługi Hermes

Aplikacje React Native działające w wersji 0.70 będą miały domyślnie włączoną Hermes. W przypadku starszych aplikacji React Native kompilacja Hermes jest dostarczana z każdą wersją React Native, począwszy od wersji 0.60.4 dla wersji Android i wersji 0.64.0 dla iOS. Dopasowane wersje eliminują ryzyko niezgodności zależności w Twojej aplikacji React Native.

instagram viewer

Aby włączyć Hermes w tych starszych wersjach React Native, musisz dodać konfigurację zarówno do aplikacji na Androida, jak i iOS.

Na Androidzie edytuj swój android/app/build.gradle plik:

projekt.roz.reaguj = [
 wpisPlik: "indeks.js",
 włącz Hermesa: PRAWDA// wyczyść i odbuduj w przypadku zmiany
]

W systemie iOS wprowadzasz następujące zmiany w swoim ios/Podplik:

use_react_native!(
 :ścieżka => config[:reactNativePath],
 :hermes_enabled => PRAWDA
)

iOS wymaga zainstalowania kapsułek Hermes po skonfigurowaniu ustawień.

Uruchom następujące polecenie, aby zainstalować pody:

cd ios && instalacja pod

Włączanie Hermesa z Expo

Możesz także użyć silnika Hermes do aplikacji React Native zbudowanych lub uruchamianych przy użyciu Expo. Biblioteka Expo obsługuje Hermes od SDK w wersji 42 na Androida i SDK w wersji 43 na iOS do aktualnej wersji 0.70. Należy zauważyć, że autonomiczne aplikacje nie mogą działać w Hermes, chyba że zostały zbudowane przy użyciu Expo Application Services Build.

Aby włączyć Hermes w aplikacji React Native, edytuj swój aplikacja.json plik:

{
"wystawa": {
"jsEngine": "hermes"
 }
}

Teraz Twoja aplikacja zbudowana za pomocą Expo Application Services będzie miała włączony Hermes jako silnik JavaScript.

Optymalizacja wydajności Hermes dla React Native Apps

Większość silników JavaScript analizuje cały kod źródłowy JavaScript za pomocą systemu kompilacji JIT (Just in Time). System JIT spowalnia wykonywanie, ponieważ urządzenie musi czekać na zakończenie całego procesu kompilacji. Hermes stosuje podejście kompilacji z wyprzedzeniem (AOT), przenosząc większość ciężkiej pracy silnika JavaScript na czas kompilacji.

Hermes wpływa głównie na trzy wskaźniki wydajności aplikacji: TTI aplikacji (Time to Interactive), rozmiar binarny i wykorzystanie pamięci.

Czas na interaktywność

TTI to czas potrzebny aplikacji do załadowania i obsługi interakcji użytkownika, takiej jak przewijanie lub pisanie. Hermes poprawia średni TTI dla aplikacji React Native w porównaniu z innymi silnikami JavaScript.

Ta redukcja TTI jest spowodowana tym, że Hermes nie uruchamia kompilatora JIT.

Rozmiar binarny

Rozmiar binarny to rozmiar dołączonej aplikacji React Native. Aplikacje na Androida używają Format pliku APK, podczas gdy aplikacje na iOS używają formatu, który Apple nazywa IPA. Korzystanie z Hermes znacznie zmniejsza rozmiar aplikacji na urządzeniach z Androidem.

Zużycie pamięci

Wykorzystanie pamięci jest kolejnym krytycznym wskaźnikiem optymalizacji w aplikacjach. Negatywnie wpłynie to na środowisko użytkownika aplikacji, jeśli zużywa ona zbyt dużo pamięci. Hermes wdraża system Garbage Collector, który reguluje wykorzystanie pamięci na żądanie, zapewniając, że aplikacja wykorzystuje tylko potrzebną przestrzeń pamięci podczas działania.

Hermes oferuje nowe środowisko do debugowania aplikacji React Native działających na emulatorze, symulatorze lub urządzeniu fizycznym za pomocą Expo. Hermes obsługuje debugowanie aplikacji React Native przy użyciu protokołu inspektora Chrome DevTools. Nie należy mylić tego z tradycyjnym Debugowanie JavaScript za pomocą konsoli przeglądarki.

Aby skonfigurować Chrome do debugowania aplikacji Hermes, wykonaj następujące kroki.

  1. Nawigować do chrome://inspekcja w przeglądarce Chrome.
  2. Kliknij na Skonfiguruj przycisk.
  3. W oknie modalnym na ekranie wprowadź adres serwera pakietu Metro, na którym działa Twoja aplikacja React Native, i kliknij Zrobione.

Możesz teraz debugować swoją aplikację React Native za pomocą łącza Hermes target inspect.

Dlaczego Hermes jest zoptymalizowany tylko pod kątem reagowania natywnego

Optymalna wydajność Hermesa jako silnika React Native JavaScript częściowo zależy od jego środowiska uruchomieniowego. W React Native łączysz cały kod JavaScript w środowisku aplikacji. Ten system sprawia, że ​​kod bajtowy wysyłki jest wydajny.

Innym czynnikiem, który należy wziąć pod uwagę, jest ilość pracy wykonanej podczas kompilacji JavaScript. Hermes zarządza częstymi interakcjami użytkowników, których oczekuje się od aplikacji mobilnych, unikając jednocześnie agresywnej optymalizacji kodu bajtowego. Mechanizm JavaScript kompilatora JIT nie wykonywałby zadań w ten sposób.