Metro: apa itu, fitur utama dan prinsip kerja

Apa itu Metro?

Metro adalah bundler JavaScript sumber terbuka yang dibuat oleh tim Meta untuk React Native. Ini menggantikan Packager dari versi awal React Native dan menjadi alat kompilasi standar untuk platform ini. Metro tidak ditujukan untuk pengembangan web: arsitekturnya berorientasi secara eksklusif pada aplikasi seluler yang berjalan di bawah mesin JavaScript JSC (JavaScriptCore) atau Hermes.

Sejarah penciptaan dan posisi

Metro muncul pada tahun 2018 sebagai pengganti React Native Packager lama. Alasan utama pembuatannya adalah kebutuhan akan bundler yang bekerja secara efisien dengan jutaan modul dalam aplikasi seluler besar. Tidak seperti Webpack, Metro tidak mendukung CSS, HTML, atau gambar sebagai modul — sumber daya ini diproses oleh alat React Native yang terpisah. Facebook menggunakan Metro untuk membangun aplikasi utamanya, yang berisi lebih dari 100 ribu file.

Metro didistribusikan melalui npm sebagai paket metro dan diinstal secara otomatis bersama dengan React Native CLI. Versi Metro terikat dengan versi React Native, sehingga pembaruan bundler terjadi bersamaan dengan pembaruan platform.

Bagaimana cara kerja bundler Metro?

Metro menerima titik masuk aplikasi, membangun grafik dependensi, mentransformasi setiap modul, dan menyerialisasikan hasilnya menjadi satu bundel. Proses ini melalui tiga fase: Resolve (resolusi modul), Transform (transformasi), dan Serialize (serialisasi).

Proses kompilasi di Metro

// Contoh konfigurasi Metro untuk transformasi kustom
const metroConfig = {
  transformer: {
    babelTransformerPath: require('metro-babel-transformer'),
    async transform({ src, filename, options }) {
      const result = await babelTransform({ src, filename, options });
      return {
        ast: result.ast,
        code: result.code,
        map: result.map,
        dependencies: [],
      };
    },
  },
  serializer: {
    createModuleIdFactory() {
      let nextId = 0;
      const moduleIds = new Map();
      return ({ path }) => {
        if (!moduleIds.has(path)) {
          moduleIds.set(path, nextId++);
        }
        return moduleIds.get(path);
      };
    },
  },
};

Pada fase Resolve, Metro menentukan lokasi setiap modul yang diimpor, dengan mempertimbangkan alias dan node_modules. Pada fase Transform, setiap file melewati transformer Babel untuk konversi JSX, TypeScript, dan ekstensi lainnya menjadi JavaScript murni. Fase akhir Serialize mengumpulkan semua modul yang telah ditransformasi menjadi satu atau beberapa file bundel.

Arsitektur Metro

Metro dibangun di atas arsitektur modular, di mana setiap tahap kompilasi diimplementasikan sebagai komponen terpisah. Ini memungkinkan penggantian modul standar dengan modul khusus tanpa mengubah inti bundler. Arsitektur Metro mencakup tiga paket utama: metro, metro-config, dan metro-resolver.

Komponen utama Metro

Metro Server — server pengembangan yang dijalankan dengan perintah npx react-native start. Ini melayani permintaan transformasi modul secara real-time, menyediakan Fast Refresh. Module Store — cache yang menyimpan modul yang telah ditransformasi di memori untuk mempercepat kompilasi berulang. Dependency Graph — grafik dependensi yang diperbarui secara inkremental saat file berubah.

Watchman — pengamat file dari Meta yang digunakan Metro untuk mendeteksi perubahan pada sistem file. Tanpa Watchman, Metro harus memindai ulang seluruh struktur file pada setiap perubahan, yang secara signifikan memperlambat pengembangan. Instalasi Watchman wajib untuk bekerja dengan nyaman menggunakan Metro pada proyek dengan ukuran berapa pun.

Konfigurasi Metro di proyek React Native

Konfigurasi Metro ditentukan dalam file metro.config.js di direktori root proyek. File tipikal mendefinisikan folder tambahan untuk pencarian modul, pemblokiran untuk mengecualikan file yang tidak perlu, dan transformer khusus. Di React Native 0.72+, deteksi konfigurasi otomatis digunakan, tetapi untuk monorepositori, konfigurasi wajib dilakukan.

Konfigurasi dasar Metro untuk React Native

// metro.config.js
const config = {
  resolver: {
    sourceExts: ['js', 'jsx', 'ts', 'tsx', 'json'],
    nodeModulesPaths: ['node_modules'],
    blockList: [/\.test\.js$/, /__tests__\/.*/],
    extraNodeModules: {
      'shared-components': path.resolve(__dirname, '../shared/src'),
    },
  },
  transformer: {
    minifierConfig: {
      keep_classnames: true,
      keep_fnames: true,
      mangle: { reserved: ['React', 'Component'] },
    },
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

blockList mengecualikan file pengujian dari kompilasi, mengurangi ukuran bundel. nodeModulesPaths menunjukkan jalur tambahan untuk pencarian paket — penting untuk monorepositori. extraNodeModules membuat alias untuk paket bersama yang digunakan di berbagai proyek monorepositori.

Optimasi kompilasi Metro

Metro menyediakan beberapa mekanisme untuk optimasi ukuran bundel dan kecepatan kompilasi. Inline Requires — teknik paling efektif, yang mengubah impor di tingkat atas menjadi require lokal di dalam fungsi. RAM bundles memungkinkan pemuatan modul secara inkremental. Hermes mengompilasi JavaScript menjadi kode byte, mengurangi ukuran aplikasi sebesar 20–30%.

Mengaktifkan Inline Requires dan Hermes

// metro.config.js — optimasi untuk produksi
const config = {
  transformer: {
    async transform({ src, filename, options }) {
      const inlineRequires = options.dev ? false : true;
      return await defaultTransform({ src, filename, options: { ...options, inlineRequires } });
    },
  },
  serializer: {
    polyfillModuleNames: [],
  },
};

// Untuk mengaktifkan Hermes — di build.gradle (Android):
// project.ext.react = [enableHermes: true, bundleInRelease: true]
// Untuk iOS — di Podfile: :hermes_enabled => true

Untuk diagnostik ukuran bundel, Metro menyediakan bendera --bundle-output dengan keluaran statistik. Gunakan bundle-visualizer untuk analisis komposisi bundel dan menemukan modul besar yang dapat dimuat secara lambat. Pemeriksaan ukuran bundel secara teratur harus menjadi bagian dari pipeline CI/CD proyek React Native.

Delta Bundles dan kompilasi inkremental

Metro mendukung delta-bundel — mekanisme di mana setelah kompilasi penuh pertama, server hanya mengirimkan perubahan (delta) antara versi lama dan baru dari bundel. Ini secara drastis mempercepat kompilasi berikutnya: waktu pembaruan berkurang dari detik menjadi puluhan milidetik. Delta-bundel sangat efektif pada tahap pengembangan, ketika pengembang sering menyimpan perubahan dan memuat ulang aplikasi.

Untuk mengaktifkan delta-bundel di React Native, gunakan bendera --delta dalam perintah npx react-native bundle. Di sisi klien, delta-bundel didukung mulai dari React Native 0.64. Dalam kompilasi produksi, delta-bundel tidak diterapkan — sebagai gantinya, bundel penuh dengan kode byte Hermes digunakan untuk kinerja startup maksimal. Ini dicapai karena peningkatan kecepatan pengembangan mengkompensasi biaya kompilasi penuh pertama.

Hermes dan Metro: bekerja sama

Hermes — mesin JavaScript yang dikembangkan oleh Meta khusus untuk React Native. Metro menghasilkan kode byte Hermes pada tahap kompilasi, yang memungkinkan aplikasi untuk memulai tanpa kompilasi JavaScript yang mahal di perangkat. Untuk mengaktifkan Hermes, cukup tambahkan enableHermes: true di metro.config.js dan konfigurasikan build.gradle atau Podfile. Hermes mengurangi waktu startup aplikasi sebesar 30–50% dan ukuran APK sebesar 20–30% dibandingkan dengan JavaScriptCore.

Saat menggunakan Hermes, penting untuk mengingat batasannya: mesin tidak mendukung Proxy, Reflect, dan beberapa kemampuan ES6. Sebagian besar aplikasi React Native tidak menggunakan kemampuan ini secara langsung, tetapi beberapa pustaka dapat menyebabkan konflik. Sebelum mengaktifkan Hermes, periksa kompatibilitas semua dependensi proyek melalui daftar periksa kompatibilitas resmi. Metro secara otomatis beralih ke mode pembuatan kode byte saat Hermes diaktifkan.

Pemantauan kinerja Metro

Untuk melacak efisiensi kompilasi Metro, gunakan metrik bawaan yang tersedia melalui Flipper — alat debug React Native. Metro mempublikasikan peristiwa: bundle_request, transform, resolve dengan waktu eksekusi setiap tahap. Analisis data ini membantu mengidentifikasi hambatan: jika fase transform memakan lebih dari 70% waktu, masalahnya ada di transformer Babel. Aktifkan pencatatan log Metro melalui bendera --verbose untuk diagnostik mendetail.