Czego można się spodziewać po silniku Hermesa w React Native 0,70

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żna oczekiwać od Hermesa i niektórych funkcji, które wpłyną na wydajność Twojej aplikacji React Native.

Co to jest Hermes?

Hermes to silnik JavaScript o otwartym kodzie źródłowym, który optymalizuje wydajność podczas uruchamiania aplikacji na systemy iOS i Android, wstępnie kompilując kod JavaScript w wydajny kod bajtowy i zmniejszając zużycie pamięci aplikacji.

MAKEUSEOF WIDEO DNIA

Aktualizacja starszych wersji React Native w celu obsługi Hermesa

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

jak zabezpieczyć hasłem dysk USB

Aby włączyć Hermes w tych starszych wersjach React Native, musisz dodać trochę konfiguracji do aplikacji na Androida i iOS.

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

project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

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

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

iOS wymaga zainstalowania kapsuł Hermesa po skonfigurowaniu ustawień.

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

cd ios && pod install

Włączanie Hermesa z Expo

Możesz także użyć silnika Hermes do aplikacji React Native zbudowanych lub uruchomionych przy użyciu Expo. Biblioteka Expo obsługuje Hermes od wersji SDK 42 na Androida i SDK w wersji 43 na iOS do obecnej wersji 0.70. Należy zauważyć, że samodzielne aplikacje nie mogą uruchamiać Hermesa, chyba że zostaną zbudowane przy użyciu kompilacji usług aplikacji Expo.

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

{ 
  "expo": { 
    "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 aplikacji natywnych React

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 metodę kompilacji z wyprzedzeniem (AOT), przenosząc większość ciężkiej pracy silnika JavaScript na czas kompilacji.

jak zdiagnozować problemy ze sprzętem laptopa

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

Czas na interaktywność

TTI to czas potrzebny aplikacji do załadowania i obsługi interakcji użytkownika, takich 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 posiada 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 Apple nazywa IPA. Korzystanie z Hermesa znacznie zmniejsza rozmiar aplikacji na urządzeniach z systemem Android.

Zużycie pamięci

Użycie pamięci to kolejny krytyczny wskaźnik do optymalizacji w aplikacjach. Użycie zbyt dużej ilości pamięci miałoby negatywny wpływ na środowisko użytkownika aplikacji. Hermes wdraża system Garbage Collector, który reguluje wykorzystanie pamięci na żądanie, zapewniając, że aplikacja podczas działania wykorzystuje tylko potrzebne miejsce w pamięci.

Debugowanie React Native za pomocą Hermesa i Chrome DevTools

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

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

Nawigować do chrome://inspekcja w przeglądarce Chrome.
Kliknij na Konfiguruj przycisk.
W menu ekranowym wprowadź adres serwera dla pakietu Metro, na którym działa Twoja aplikacja React Native, i kliknij Gotowe .

Możesz teraz debugować swoją aplikację React Native za pomocą łącza inspekcji docelowej Hermesa.

Dlaczego Hermes jest zoptymalizowany tylko pod kątem React Native

Optymalna wydajność Hermesa jako silnika React Native JavaScript jest częściowo związana ze środowiskiem wykonawczym. W React Native łączysz cały kod JavaScript w środowisku aplikacji. Ten system sprawia, że wysyłka kodu bajtowego jest wydajna.

Kolejnym czynnikiem do rozważenia jest ilość pracy wykonanej podczas kompilacji JavaScript. Hermes zarządza częstymi interakcjami użytkowników oczekiwanymi w aplikacjach mobilnych, unikając agresywnej optymalizacji kodu bajtowego. Silnik JavaScript kompilatora JIT nie wykonałby zadań w ten sposób.