Belajar Hermes JS Engine - Hermes in React Native Production

#Pendahuluan

Di episode 7 kalian menguasai debugging dan profiling — mencari breakpoint, membaca flame chart, dan berburu kebocoran. Semua itu terjadi di lingkungan development. Sekarang kita berpindah dunia: production. Build yang naik ke Play Store dan App Store berperilaku berbeda dari build development, dan Hermes punya peran besar dalam perbedaan itu.

Episode ini membahas alur build produksi Hermes, cara mengaktifkannya lewat konfigurasi build, runtime configuration yang relevan, serta bagaimana menganalisis metrik startup, ukuran bundle, dan memori pada build yang sebenarnya dirilis. Di akhir episode, kalian punya checklist yang bisa langsung dipakai untuk mengecek kesiapan produksi sebuah project React Native.

#Memahami Alur Build Produksi

Di development, Metro mengemas JavaScript dalam bentuk source atau transpiled biasa supaya cepat di-refresh saat kode berubah. Di produksi, tujuannya berubah total: bundle harus sekecil mungkin dan siap dieksekusi secepat mungkin. Di sinilah Hermes menunjukkan kekuatannya.

#Kenapa Bytecode di Build Release?

Saat build release dijalankan, source JavaScript di-minify lalu dikompilasi menjadi Hermes bytecode (format HBC) oleh hermesc. Hasilnya bukan lagi teks, melainkan binary yang langsung bisa dieksekusi runtime tanpa fase parsing panjang. Ditambah optimasi -O yang sudah dipelajari di episode 5, bundle release memangkas startup time secara signifikan.

Proses ini terjadi otomatis lewat integrasi Hermes di Metro dan gradle:

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --minify true \
  --bundle-output android/app/build/generated/assets/react/release/index.android.bundle \
  --assets-dest android/app/build/generated/res/react/release

Flag --dev false memberitahu Metro untuk memakai pipeline produksi — kompilasi bytecode Hermes aktif di mode ini, bukan di development. Ini juga saat yang tepat menghasilkan source map, yang akan kita bahas tuntas di episode 10.

#Mengaktifkan Hermes lewat Konfigurasi

Pada React Native modern, Hermes aktif secara default. Tapi kalian harus tahu di mana tombolnya dan bagaimana mengendalikannya, karena setiap project punya cerita konfigurasi yang berbeda.

#Konfigurasi Android

Di gradle, Hermes dikontrol lewat flag hermesEnabled pada project React:

android-app-build-gradle.js

project.ext.react = [
  hermesEnabled: true,
  hermesFlags: ["-O", "-output-source-map"]
]

Bagian hermesFlags meneruskan opsi tambahan ke hermesc. Baris -O mengaktifkan optimizer, dan -output-source-map membuat source map bytecode untuk debugging error di production. Kalau kalian menemukan enableHermes pada project lama, fungsinya sama — hanya nama yang berganti seiring versi.

#Konfigurasi iOS

Di sisi iOS, pengaturan dilakukan di Podfile. Tambahkan :hermes_enabled => true pada target aplikasi lalu jalankan bundle exec pod install untuk menarik pod Hermes yang sesuai. Karena Hermes dibangun sebagai pod native, perubahan konfigurasi membutuhkan re-install pod dan rebuild.

#Konfigurasi Metro dan react-native.config.js

Metro dikonfigurasi lewat metro.config.js di root project:

metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
 
const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: { experimentalImportSupport: false, inlineRequires: true },
    }),
  },
};
 
module.exports = mergeConfig(getDefaultConfig(__dirname), config);

Plugin bytecode Hermes (HermesBytecodePlugin) disuntikkan secara otomatis oleh serializer default Metro ketika dev: false. Kalian jarang perlu menyentuhnya, tapi jika alur build custom dibutuhkan, serializer.customSerializer adalah titik masuknya. Sementara itu, react-native.config.js dipakai untuk hal-hal seperti mengarahkan asset atau commands tambahan — bukan tempat menyalakan Hermes, sehingga jangan bingung kalau tidak menemukan opsi Hermes di sana.

#Runtime Configuration Hermes

Selain konfigurasi build, ada opsi runtime yang bisa disetel lewat gradle properties, seperti hermesFlags yang sudah dilihat. Beberapa perilaku runtime yang relevan untuk produksi:

• GC heap size: batasan ukuran heap bisa disetel agar Hermes menyesuaikan diri dengan perangkat low-memory.
• Source map di release: menghasilkan source map di build release adalah biaya kecil yang menyelamatkan waktu besar saat debugging error dari pengguna.
• Logging tersembunyi: pastikan log development tidak ikut ke release — Hermes dan console.log yang berlebihan menambah kerja runtime.

Konfigurasi runtime yang terlalu agresif bisa mengorbankan stabilitas. Aturan praktisnya: di release, minimalis — hanya opsi yang terbukti perlu dan tervalidasi di staging.

#Menganalisis Metrik Startup, Bundle, dan Memori

Setelah build release berhasil, tugas belum selesai — harus divalidasi. Ada tiga metrik utama yang wajib diukur:

#Ukuran Bundle

Ukuran bytecode menunjukkan seberapa ringan payload yang diunduh dan dimuat aplikasi:

ls -lh android/app/build/generated/assets/react/release/index.android.bundle
du -h android/app/build/generated/assets/react/release/index.android.bundle

Catat angka ini di setiap rilis. Kenaikan drastis antar versi adalah tanda ada dependency atau fitur yang mencuri kuota. Pasang budget: jika ukuran melewati batas, build gagal — kita akan otomatisasi ini di episode 11.

#Startup Time

Ukur cold start dengan timing dari OS:

adb shell am start -W -n com.example.belajarhermes/.MainActivity | grep -E "TotalTime|WaitTime"

TotalTime dan WaitTime menunjukkan berapa lama dari proses diluncurkan sampai aktivitas pertama tampil. Bandingkan angka ini pada perangkat low-end dan high-end — target Hermes adalah konsistensi di keduanya.

#Memori

Gunakan teknik episode 6: adb shell dumpsys meminfo untuk melihat Native Heap (di mana Hermes tinggal) dan Java Heap. Jalankan aplikasi selama beberapa menit, keluar-masuk screen, lalu periksa apakah memori kembali ke level baseline. Kalau tidak, ada kebocoran yang harus diburu dengan heap snapshot.

#Checklist Konfigurasi Produksi

Sebelum release, pastikan hal-hal berikut:

• hermesEnabled (atau enableHermes) aktif untuk platform target.
• hermesFlags menyertakan -O untuk optimasi bytecode.
• Source map release dihasilkan dan diarsipkan — dipakai episode 10.
• Ukuran bundle tercatat dan dibawah budget.
• Cold start dan memori diukur pada perangkat low-end.
• Hermes aktif di build release, bukan hanya di development.

#Penutup

Kalian sekarang paham alur build produksi Hermes: source di-minify, dikompilasi menjadi bytecode HBC oleh hermesc, dan dirangkai Metro lewat HermesBytecodePlugin. Kalian tahu di mana mengaktifkannya — hermesEnabled di gradle, :hermes_enabled => true di Podfile, serta konfigurasi Metro — dan bagaimana mengukur metrik yang membuktikan aplikasi siap rilis.

Inti yang harus dibawa pulang:

• Build release mengkompilasi JS menjadi Hermes bytecode yang siap eksekusi tanpa parsing panjang.
• Hermes diaktifkan lewat konfigurasi build: gradle untuk Android, Podfile untuk iOS.
• hermesFlags adalah pintu masuk untuk optimasi seperti -O dan source map.
• Ukur bundle size, cold start, dan memori di setiap rilis, bukan sekali saja.
• Hermes aktif di release adalah syarat mutlak, bukan fitur tambahan.

Di episode 9 berikutnya kita melebarkan sayap: Hermes di Node.js dan edge runtime. Kalian akan melihat status dukungan Hermes untuk server-side, use case serverless dan edge, cara embedding Hermes secara custom, serta perbedaan strategi optimasi antara runtime mobile dan server. Sampai jumpa!