Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.
React Native 0.70 sudah keluar, dan Hermes adalah pengiriman mesin JavaScript default baru dengan pembaruan ini. Inilah yang diharapkan dari Hermes dan beberapa fitur yang akan memengaruhi kinerja aplikasi React Native Anda.
Apa itu Hermes?
Hermes adalah mesin JavaScript sumber terbuka yang mengoptimalkan kinerja selama iOS dan Android peluncuran aplikasi dengan melakukan pra-kompilasi kode JavaScript menjadi bytecode yang efisien dan mengurangi aplikasi penggunaan memori.
Memperbarui Versi Lama React Native untuk Mendukung Hermes
Aplikasi React Native yang berjalan pada 0,70 akan mengaktifkan Hermes secara default. Untuk aplikasi React Native yang lebih lama, build Hermes disertakan dengan setiap versi React Native mulai dari versi 0.60.4 untuk build Android dan versi 0.64.0 untuk iOS. Versi yang cocok menghilangkan risiko ketidakcocokan ketergantungan dalam aplikasi React Native Anda.
Untuk mengaktifkan Hermes di React Native versi lama ini, Anda perlu menambahkan beberapa konfigurasi ke aplikasi Android dan iOS Anda.
Di Android, edit android/app/build.gradle mengajukan:
project.ext.react = [
File entri: "index.js",
aktifkanHermes: BENAR// bersihkan dan bangun kembali jika berubah
]
Di iOS, Anda membuat perubahan berikut pada ios/Podfile:
use_react_native!(
: jalur => konfigurasi[:reactNativePath],
:hermes_enabled => BENAR
)
iOS mengharuskan Anda untuk menginstal pod Hermes setelah mengonfigurasi pengaturan.
Jalankan perintah berikut untuk menginstal pod:
cd ios && instal pod
Mengaktifkan Hermes Dengan Expo
Anda juga dapat menggunakan mesin Hermes untuk aplikasi React Native yang dibuat atau dijalankan menggunakan Expo. Pustaka Expo mendukung Hermes dari SDK versi 42 di Android dan SDK versi 43 di iOS hingga versi saat ini 0.70. Penting untuk diperhatikan bahwa aplikasi yang berdiri sendiri tidak dapat menjalankan Hermes kecuali dibangun menggunakan Expo Application Services Build.
Untuk mengaktifkan Hermes di aplikasi React Native, edit app.json mengajukan:
{
"pameran": {
"jsEngine": "hermes"
}
}
Sekarang aplikasi Anda yang dibangun dengan Layanan Aplikasi Expo akan mengaktifkan Hermes sebagai mesin JavaScriptnya.
Pengoptimalan Kinerja Hermes untuk React Native Apps
Sebagian besar mesin JavaScript mengurai semua kode sumber JavaScript menggunakan sistem kompilasi JIT (Just in Time). Sistem JIT memperlambat eksekusi karena perangkat Anda harus menunggu seluruh proses kompilasi selesai. Hermes menggunakan pendekatan kompilasi sebelumnya (AOT), mentransfer sebagian besar pekerjaan mesin JavaScript tugas berat untuk membangun waktu.
Hermes terutama memengaruhi tiga metrik kinerja aplikasi: TTI aplikasi (Time to Interactive), ukuran biner, dan penggunaan memori.
Saatnya Interaktif
TTI adalah waktu yang diperlukan aplikasi untuk memuat dan mendukung interaksi pengguna seperti menggulir atau mengetik. Hermes meningkatkan TTI rata-rata untuk aplikasi React Native dibandingkan dengan mesin JavaScript lainnya.
Pengurangan TTI ini karena Hermes tidak menjalankan kompiler JIT.
Ukuran Biner
Ukuran biner adalah ukuran aplikasi React Native yang dibundel. Aplikasi Android menggunakan format file APK, sedangkan aplikasi iOS menggunakan format panggilan Apple IPA. Menggunakan Hermes secara signifikan mengurangi ukuran aplikasi pada perangkat Android.
Penggunaan Memori
Penggunaan memori adalah metrik penting lainnya untuk dioptimalkan dalam aplikasi. Pengalaman pengguna aplikasi akan terpengaruh secara negatif jika menggunakan terlalu banyak memori. Hermes menerapkan sistem Pengumpul Sampah yang mengatur penggunaan memori sesuai permintaan, memastikan aplikasi hanya menggunakan ruang memori yang diperlukan saat berjalan.
Hermes hadir dengan pengalaman baru untuk men-debug aplikasi React Native yang berjalan di emulator, simulator, atau perangkat fisik menggunakan Expo. Hermes mendukung debugging aplikasi React Native menggunakan Protokol Inspektur Chrome DevTools. Anda tidak boleh bingung dengan tradisional Proses debug JavaScript menggunakan konsol browser.
Untuk mengonfigurasi Chrome untuk men-debug aplikasi Hermes, ikuti langkah-langkah ini.
- Navigasi ke chrome://memeriksa di dalam browser Chrome Anda.
- Klik pada Konfigurasi tombol.
- Di dalam modal di layar, masukkan alamat server untuk metro bundler yang menjalankan aplikasi React Native Anda dan klik Selesai.
Anda sekarang dapat men-debug aplikasi React Native Anda menggunakan tautan inspeksi target Hermes.
Mengapa Hermes Dioptimalkan Hanya untuk Bereaksi Asli
Performa optimal Hermes sebagai mesin React Native JavaScript sebagian karena lingkungan runtime-nya. Di React Native, Anda memaketkan semua kode JavaScript di dalam lingkungan aplikasi. Sistem ini membuat bytecode pengiriman menjadi efisien.
Faktor lain yang perlu dipertimbangkan adalah jumlah pekerjaan yang dilakukan selama kompilasi JavaScript. Hermes mengelola interaksi pengguna yang sering diantisipasi dari aplikasi seluler sambil menghindari pengoptimalan bytecode yang agresif. Mesin JavaScript kompiler JIT tidak akan melakukan tugas dengan cara ini.