Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
React Native 0.70 çıktı ve Hermes, bu güncellemeyle birlikte gönderilen yeni varsayılan JavaScript motorudur. İşte Hermes'ten neler bekleyebileceğiniz ve React Native uygulamanızın performansını etkileyecek bazı özellikler.
Hermes Nedir?
Hermes, iOS ve Android sırasında performansı optimize eden açık kaynaklı bir JavaScript motorudur. uygulama, JavaScript kodunu verimli bayt koduna önceden derleyerek ve uygulamayı azaltarak başlar hafıza kullanımı.
Eski React Native Sürümlerini Hermes'i Desteklemek İçin Güncelleme
0.70 üzerinde çalışan React Native uygulamalarında varsayılan olarak Hermes etkin olacaktır. Daha eski React Native uygulamaları için, Android derlemeleri için 0.60.4 sürümünden ve iOS için 0.64.0 sürümünden başlayarak her React Native sürümüyle birlikte bir Hermes derlemesi gönderilir. Eşleşen sürümler, React Native uygulamanızda bağımlılık uyuşmazlığı riskini ortadan kaldırır.
React Native'in bu eski sürümlerinde Hermes'i etkinleştirmek için hem Android hem de iOS uygulamalarınıza bazı yapılandırmalar eklemeniz gerekir.
Android'de, android/uygulama/build.gradle dosya:
proje.ext.react = [
giriş dosyası: "index.js",
Hermes'i etkinleştir: doğru// değişiyorsa temizle ve yeniden oluştur
]
iOS'ta, cihazınızda aşağıdaki değişiklikleri yaparsınız: ios/Pod dosyası:
use_react_native!(
:yol => yapılandırma[:reactNativePath],
:hermes_enabled => doğru
)
iOS, ayarları yapılandırdıktan sonra Hermes bölmelerini yüklemenizi gerektirir.
Bölmeleri yüklemek için aşağıdaki komutu çalıştırın:
cd ios && bölme kurulumu
Hermes'i Expo ile Etkinleştirme
Hermes motorunu, Expo kullanılarak oluşturulan veya çalıştırılan React Native uygulamaları için de kullanabilirsiniz. Expo kitaplığı, Android'de SDK sürüm 42'den ve iOS'ta SDK sürüm 43'ten geçerli sürüm 0.70'e kadar Hermes'i destekler. Tek başına uygulamaların, Expo Uygulama Hizmetleri Yapısı kullanılarak oluşturulmadıkça Hermes'i çalıştıramayacağını unutmamak önemlidir.
Bir React Native uygulamasında Hermes'i etkinleştirmek için uygulama.json dosya:
{
"fuar": {
"jsEngine": "hermes"
}
}
Artık Expo Uygulama Hizmetleri ile oluşturulan uygulamanızın JavaScript motoru olarak Hermes etkin olacaktır.
React Yerel Uygulamaları için Hermes Performans Optimizasyonu
Çoğu JavaScript motoru, bir JIT (Tam Zamanında) derleme sistemi kullanarak tüm JavaScript kaynak kodunu ayrıştırır. Cihazınızın tüm derleme işleminin tamamlanmasını beklemesi gerektiğinden, JIT sistemi yürütmeyi yavaşlatır. Hermes, vaktinden önce derleme (AOT) yaklaşımı kullanır ve ağır hizmet JavaScript motoru çalışmalarının çoğunu zaman oluşturmak için aktarır.
Hermes temel olarak uygulama performansının üç metriğini etkiler: uygulama TTI (Etkileşim Süresi), ikili boyut ve bellek kullanımı.
Etkileşim Zamanı
TTI, bir uygulamanın yüklenmesi ve kaydırma veya yazma gibi kullanıcı etkileşimlerini desteklemesi için geçen süredir. Hermes, diğer JavaScript motorlarına kıyasla React Native uygulamaları için ortalama TTI'yi iyileştirir.
TTI'daki bu azalma, Hermes'in bir JIT derleyicisi çalıştırmamasından kaynaklanmaktadır.
İkili Boyut
İkili boyut, paketlenmiş React Native uygulamasının boyutudur. Android uygulamaları, APK dosya biçimi, iOS uygulamaları ise Apple'ın IPA olarak adlandırdığı bir biçim kullanır. Hermes'i kullanmak, Android cihazlarda uygulama boyutunu önemli ölçüde azaltır.
Hafıza kullanımı
Bellek kullanımı, uygulamalarda optimize etmek için başka bir kritik ölçümdür. Çok fazla bellek kullanan bir uygulamanın kullanıcı deneyimi olumsuz etkilenir. Hermes, talep üzerine bellek kullanımını düzenleyen ve bir uygulamanın çalışırken yalnızca gerekli bellek alanını kullanmasını sağlayan bir Çöp Toplayıcı sistemi uygular.
Hermes, Expo kullanarak bir öykünücü, simülatör veya fiziksel cihaz üzerinde çalışan React Native uygulamalarında hata ayıklamak için yeni bir deneyim sunar. Hermes, Chrome DevTools'un Müfettiş Protokolünü kullanarak React Native uygulamalarında hata ayıklamayı destekler. Bunu geleneksel olanla karıştırmamalısınız. Tarayıcı konsolunu kullanarak JavaScript hata ayıklaması.
Chrome'u Hermes uygulamalarında hata ayıklayacak şekilde yapılandırmak için şu adımları izleyin.
- Şu yöne rotayı ayarla krom://incele Chrome tarayıcınızın içinde.
- Tıkla Yapılandır düğme.
- Ekrandaki modelin içine, React Native uygulamanızı çalıştıran metro paketleyici için sunucu adresini girin ve tıklayın Tamamlamak.
Artık Hermes hedef inceleme bağlantısını kullanarak React Native uygulamanızda hata ayıklayabilirsiniz.
Hermes Neden Yalnızca React Native için Optimize Edildi?
Hermes'in bir React Native JavaScript motoru olarak optimum performansı, kısmen çalışma zamanı ortamına bağlıdır. React Native'de, tüm JavaScript kodunu uygulama ortamında paketlersiniz. Bu sistem, sevkıyat bayt kodunu verimli hale getirir.
Dikkate alınması gereken diğer bir faktör, JavaScript derlemesi sırasında yapılan iş miktarıdır. Hermes, agresif bayt kodu optimizasyonundan kaçınırken, mobil uygulamalardan beklenen sık kullanıcı etkileşimini yönetir. Bir JIT derleyici JavaScript motoru, görevleri bu şekilde gerçekleştirmez.