Bundler — apa itu, apa saja jenisnya dan prinsip kerja

Apa itu Bundler?

Bundler (penggabung modul) — alat baris perintah yang menerima titik masuk (entry point) — file utama aplikasi — dan secara rekursif menelusuri semua dependensinya, membangun grafik modul. Pada keluaran, bundler menghasilkan satu atau beberapa file yang dapat dihubungkan ke halaman HTML atau dijalankan di aplikasi mobile.

Mengapa bundler diperlukan dalam pengembangan modern

Browser untuk waktu lama tidak mendukung sistem modul JavaScript di tingkat platform. Bundler memecahkan masalah ini dengan mengubah ratusan import dan require menjadi satu file. Saat ini, bahkan dengan dukungan native modul ES di browser, bundler melakukan tugas tambahan: transpilasi JSX dan TypeScript, minifikasi kode, code splitting untuk pemuatan lambat, dan hot module replacement (HMR) untuk mempercepat pengembangan.

Dalam pengembangan aplikasi mobile, React Native menggunakan Metro sebagai bundler default, dan Flutter menggunakan sistem build sendiri berbasis Dart. Pemilihan bundler secara langsung mempengaruhi kecepatan pengembangan, ukuran aplikasi, dan performa runtime.

Bagaimana cara kerja bundling?

Bundling melalui beberapa tahap: parsing file masukan, membangun grafik dependensi, transformasi modul, dan menghasilkan file keluaran. Pada setiap tahap, bundler menerapkan loader untuk transformasi kode sumber dan plugin untuk optimasi.

Tahap parsing dan grafik dependensi

Bundler dimulai dari titik masuk, membaca file dan membangun AST (pohon sintaksis abstrak). Dari AST diekstrak semua pernyataan import dan require. Untuk setiap import yang ditemukan, bundler mengulangi proses secara rekursif hingga semua dependensi terkumpul dalam satu grafik.

// Implementasi bundler yang disederhanakan
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

Setelah membangun grafik, bundler menerapkan loader — transformasi yang mengonversi file ke JavaScript: TypeScript → JS, SCSS → CSS, JSX → fungsi JSX. Kemudian plugin melakukan transformasi tambahan: minifikasi, inline gambar, generasi service worker.

Jenis utama bundler

Bundler dibagi menjadi tiga generasi: klasik, terspesialisasi, dan generasi baru berbasis modul ES. Setiap jenis memiliki arsitektur dan area penerapan sendiri.

Bundler klasik

Webpack — bundler paling luas dengan ekosistem besar. Keunggulan utamanya adalah fleksibilitas: ribuan loader dan plugin mencakup hampir setiap skenario build. Parcel menawarkan pendekatan zero-config, secara otomatis menentukan transformasi yang diperlukan berdasarkan ekstensi file. Kedua bundler mendukung code splitting dan HMR.

Bundler terspesialisasi

Metro dibuat khusus untuk React Native dan hanya bekerja dengan JavaScript dan TypeScript. Arsitekturnya dioptimalkan untuk pengembangan mobile: dukungan inline requires, pemuatan modul asinkron, dan integrasi dengan Hermes engine. Rollup ditujukan untuk library dan paket npm, menghasilkan keluaran modul ES yang bersih tanpa pembungkus berlebihan.

Perbandingan Webpack, Metro dan Vite

Pemilihan bundler tergantung pada platform dan kebutuhan proyek. Webpack bersifat universal, tetapi memerlukan konfigurasi detail. Metro tidak ada alternatif untuk React Native. Vite menyediakan pengembangan tercepat berkat modul ES native.

Vite menggunakan esbuild untuk pre-bundling dependensi dan Rollup untuk build produksi, memberikan peningkatan kecepatan 5–10 kali lipat dibandingkan Webpack dalam mode pengembangan. Metro tidak mendukung target web, tetapi menyediakan integrasi mulus dengan React Native bridge dan Turbo Modules.

Konfigurasi bundler dalam proyek

Konfigurasi bundler menentukan bagaimana berbagai jenis file diproses, di mana build dihasilkan, dan optimasi apa yang diterapkan. File konfigurasi tipikal mencakup titik masuk, aturan untuk modul, plugin, dan pengaturan keluaran.

Contoh konfigurasi Webpack untuk proyek web React Native

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro menggunakan file terpisah metro.config.js dan babel.config.js untuk konfigurasi. Berbeda dengan Webpack, konfigurasi Metro jauh lebih sederhana karena bundler terspesialisasi untuk React Native dan tidak memerlukan konfigurasi loader untuk gaya atau gambar.

Kesalahan umum saat build

Bahkan pengembang berpengalaman pun menghadapi kesalahan bundling. Duplicate module — salah satu masalah paling umum, ketika dependensi yang sama masuk ke bundle beberapa kali karena ketidakcocokan versi di package.json. Module not found terjadi ketika jalur import salah atau paket tidak diinstal.

Kesalahan spesifik Metro

Metro dibatasi oleh ukuran bundle untuk perangkat mobile. Saat melebihi batas 2–5 MB, muncul kesalahan Unable to resolve module karena kurangnya memori pada perangkat. Solusinya — gunakan inline requires dan RAM bundles untuk pemuatan lambat modul. Metro juga sensitif terhadap symlink, sehingga untuk monorepo diperlukan konfigurasi tambahan watchFolders dalam konfigurasi.

Untuk Webpack, masalah tipikal adalah Module parse failed, ketika file memiliki format yang tidak terduga atau loader yang diperlukan tidak ada. Pemeriksaan ekstensi file dan penambahan aturan yang sesuai di module.rules menyelesaikan masalah. Penggunaan source-map-explorer membantu menemukan modul duplikat dan dependensi berlebihan dalam bundle akhir.

Optimasi konfigurasi untuk mempercepat build

Build lambat — salah satu masalah utama saat bekerja dengan bundler. Untuk mempercepat, gunakan persistent caching, yang menyimpan hasil transformasi modul antar sesi. Webpack 5 mendukung cache file melalui cache: { type: 'filesystem' }, Vite menggunakan esbuild untuk pre-bundling, dan Metro mengandalkan cache modular di RAM. Selain itu, atur exclude untuk node_modules di loader agar tidak memproses paket yang sudah jadi lagi.

Pemilihan strategi pemisahan kode

Code splitting — pemisahan bundle menjadi bagian-bagian yang dimuat sesuai permintaan. Berbagai bundler mengimplementasikan strategi ini dengan cara masing-masing. Webpack mendukung import dinamis import(), yang membuat bagian terpisah untuk setiap modul. Metro menggunakan inline requires untuk pemuatan tertunda. Vite secara otomatis memisahkan vendor-chunk dan import dinamis tanpa konfigurasi tambahan. Pemilihan strategi tergantung pada kebutuhan proyek: untuk aplikasi mobile, bundle awal yang lebih kecil dengan pemuatan lambat lebih diutamakan.

Untuk kerja code splitting yang benar di React Native, diperlukan konfigurasi tambahan: Metro harus dikonfigurasi untuk bekerja dengan bagian asinkron melalui inlineRequires. Di Webpack dan Vite, code splitting berfungsi langsung saat menggunakan sintaks dinamis import(), yang secara otomatis membuat titik pemisahan. Untuk efisiensi maksimal, kombinasikan code splitting dengan petunjuk preload melalui <link rel="preload"> untuk bagian kritis.