Metro Bundler: apa itu, membangun proyek dan prinsip kerja

Apa itu Metro Bundler

Metro Bundler adalah bundler JavaScript sumber terbuka, dikembangkan oleh Meta untuk React Native dan digunakan secara default di semua proyek framework. Tugas Metro adalah mengambil kode JavaScript proyek beserta dependensinya dan membangun satu atau beberapa bundel yang dijalankan di perangkat. Berbeda dengan bundler universal (Webpack, Rollup, Parcel), Metro dioptimalkan untuk kekhususan pengembangan seluler: waktu pembangunan minimal, pembaruan inkremental selama pengembangan, dan pengoperasian yang benar dengan modul platform (modul native Objective-C, Swift, Java, Kotlin). Metro dikirimkan dalam React Native CLI dan tidak memerlukan instalasi terpisah. Mulai React Native 0.72, Metro versi 0.80+ mendukung transpilasi paralel modul, yang mempercepat pembangunan pada prosesor multi-inti hingga 40%.

Arsitektur Metro: Resolver, Transformer, dan Bundler

Arsitektur Metro dibagi menjadi tiga komponen independen: Resolver, Transformer, dan Bundler. Resolver bertanggung jawab untuk mencari dan menyelesaikan modul — ia membaca ekspresi import/require, menemukan file yang sesuai dengan mempertimbangkan ekstensi platform, dan mengembalikan jalur absolut. Transformer melakukan transpilasi: menerapkan Babel dengan preset dan plugin, mengubah JSX, TypeScript, atau Flow menjadi JavaScript murni. Bundler adalah tahap akhir: ia menerima graf dependensi dari Resolver dan file yang ditransformasi dari Transformer, kemudian menyerialisasinya menjadi satu atau beberapa bundel (module bundles). Pembagian menjadi tiga langkah memungkinkan Metro untuk menyimpan cache hasil setiap tahap: jika hanya satu file yang berubah, Resolver dan Bundler dapat menggunakan cache untuk modul lainnya, yang memberikan peningkatan kecepatan pembangunan hingga 10 kali lipat dalam mode pengembangan.

Resolver: resolusi modul dan pencarian platform-aware

Resolver di Metro mengimplementasikan algoritma resolusi modul, sebagian kompatibel dengan Node.js module resolution. Perbedaan utama dari Node.js — dukungan untuk ekstensi platform: require('./Component') mencari Component.native.js, Component.ios.js, Component.android.js dalam urutan prioritas yang ditentukan. Resolver juga mendukung bidang package.json "react-native" untuk memetakan modul ke implementasi alternatif — ini adalah mekanisme standar untuk pustaka dengan kode platform. Jika file tidak ditemukan, Resolver melempar kesalahan dengan tumpukan pencarian lengkap.

Transformer: Babel dan transpilasi

Transformer di dalam Metro menggunakan Babel dengan preset metro-react-native-babel-preset. Konfigurasi standar mencakup: transformasi JSX menjadi React.createElement, dukungan untuk TypeScript (penghapusan tipe), dukungan untuk Flow, dan polyfill untuk standar JavaScript modern (async/await, optional chaining, nullish coalescing). Transformer bekerja dalam mode paralel: setiap modul ditranspilasi secara independen, menggunakan kumpulan proses pekerja (secara default jumlahnya sesuai dengan jumlah CPU). Mulai Metro 0.80, Granular Transformer Cache didukung — invalidasi cache pada tingkat file individual.

Ekstensi platform di Metro

Salah satu fitur utama Metro adalah dukungan untuk ekstensi file platform. Proyek React Native dapat berisi tiga versi dari satu modul: Component.ios.js (iOS), Component.android.js (Android), dan Component.native.js (kedua platform). Saat mengimpor require('./Component'), Resolver secara otomatis memilih versi yang benar tergantung pada platform target pembangunan. Ini memungkinkan penulisan kode yang bergantung pada platform tanpa konstruksi kondisional Platform.OS. Urutan prioritas: nama.platform.js > nama.native.js > nama.js. Ekstensi .native.js digunakan untuk kode umum yang berfungsi di kedua platform tetapi tidak kompatibel dengan web. Ekstensi .ios.js dan .android.js digunakan untuk mengimplementasikan fitur spesifik — navigasi, gerakan, bekerja dengan sistem file. Metro mendukung ekstensi kustom melalui konfigurasi resolver.sourceExts.

// metro.config.js — pengaturan sourceExts dan watchFolders
const config = {
  resolver: {
    sourceExts: ['jsx', 'js', 'tsx', 'ts', 'json'],
    platformExtensions: ['ios', 'android', 'native'],
  },
  transformer: {
    babelTransformerPath: require('metro-react-native-babel-transformer'),
  },
  watchFolders: [path.resolve('../shared')],
};

Hot Reload dan Fast Refresh di Metro

Fast Refresh adalah mekanisme muat ulang panas React Native yang diimplementasikan di atas Metro. Saat pengembang mengubah file, Metro hanya mentranspilasi ulang modul yang diubah dan mengirimkan pembaruan ke aplikasi melalui WebSocket. Fast Refresh memperbarui antarmuka tanpa memuat ulang seluruh aplikasi dan mempertahankan status komponen React jika hanya JSX atau gaya yang diubah. Jika kode dengan hook atau status diubah, Fast Refresh melakukan pemasangan ulang hanya pada komponen yang diubah. Metro mendukung dua mode: Hot Module Replacement (HMR) untuk penggantian modul secara langsung dan Live Reload untuk memuat ulang aplikasi sepenuhnya saat modul native atau konfigurasi berubah. Fast Refresh diaktifkan secara default di React Native 0.76 dan tidak memerlukan konfigurasi tambahan — cukup jalankan npx react-native start.

Konfigurasi Metro: metro.config.js

metro.config.js adalah file konfigurasi Metro, yang terletak di root proyek React Native. Di dalamnya dikonfigurasikan: resolver (sourceExts, platformExtensions, extraNodeModules), transformer (babelTransformerPath, minifierConfig), server (port, host, enableFastRefresh), dan watcher (watchFolders, healthCheck). Konfigurasi standar Metro diwarisi dari paket @react-native/metro-config (React Native 0.76+). Untuk proyek dengan monorepo, tambahkan watchFolders — ini akan memungkinkan Metro melacak perubahan di paket di luar root proyek. Untuk mengonfigurasi sourceExts, tambahkan 'svg', 'png', 'gql' untuk transformator kustom. Metro mendukung konfigurasi asinkron melalui async function — ini berguna untuk menghasilkan konfigurasi secara dinamis berdasarkan lingkungan.

Optimalisasi pembangunan melalui konfigurasi

Optimalisasi pembangunan Metro dimulai dengan konfigurasi cache yang tepat. Atur maxWorkers sama dengan jumlah CPU dikurangi 1. Untuk distribusi, gunakan resetCache di CI. Minimalisir sourceExts — ekstensi tambahan memperlambat resolusi modul. Untuk proyek besar, konfigurasikan watchFolders hanya pada direktori yang diperlukan. Metro mendukung Hermes bytecode minification, yang memberikan ukuran bundel lebih kecil daripada Terser standar — gunakan minifierPath: 'metro-minify-terser'.

Hermes bundling: pembangunan ke bytecode

Metro mendukung mode pembangunan langsung ke Hermes bytecode — melewati tahap JavaScript AST. Saat membangun dengan HermesTransformer, modul dikompilasi ke HBC (Hermes ByteCode) alih-alih JavaScript biasa. Ini memberikan: ukuran bundel lebih kecil (30-40%), startup aplikasi lebih cepat (20-30%), dan konsumsi memori lebih rendah. Untuk mengaktifkan, atur hermesCommand di metro.config.js dan aktifkan flag Hermes di build.gradle (Android) atau Podfile (iOS). Pembangunan bundel Hermes dilakukan dalam dua tahap: pertama Metro membangun bundel JavaScript, kemudian Hermes CLI mengonversinya ke HBC. Mulai React Native 0.70, Hermes adalah mesin default di Android, di iOS memerlukan aktivasi eksplisit.

Metro vs Webpack: perbandingan pendekatan

Perbedaan antara Metro dan Webpack disebabkan oleh tujuan yang berbeda. Webpack adalah bundler universal untuk web dengan ekosistem plugin dan loader yang sangat besar. Metro adalah bundler khusus untuk React Native, di mana prioritasnya adalah kecepatan pembangunan inkremental dan pengoperasian yang benar dengan modul native. Webpack menggunakan graf modul berumur panjang dengan invalidasi cache cerdas — ini memberikan pembangunan ulang cepat di web, tetapi menciptakan masalah dengan ekstensi platform. Metro tidak menyimpan cache graf antar pembangunan, tetapi membangunnya setiap kali — ini menyederhanakan pemrosesan ekstensi platform dan modul Haste. Webpack mendukung impor dinamis dengan chunk, Metro juga — melalui React.lazy() dan Suspense, tetapi dengan batasan satu permintaan aktif. Ekosistem Metro secara signifikan lebih kecil: tidak ada pengganti untuk style-loader, css-loader, file-loader — tugas-tugas ini diselesaikan secara berbeda di React Native.

Kapan memilih Metro

Metro adalah satu-satunya pilihan yang tepat untuk proyek React Native. Webpack tidak mendukung platform-aware resolution secara bawaan, dan mengonfigurasi React Native dengan Webpack memerlukan upaya yang signifikan (haul bundler, expo web packager). Metro terintegrasi dengan React Native CLI, didukung oleh tim resmi Meta, dan menerima pembaruan dengan setiap rilis React Native. Untuk proyek React Native Web, Anda dapat menggunakan Webpack untuk pembangunan web, sambil mempertahankan Metro untuk bundel seluler.