Belajar Microfrontend - Module Federation 2.0: Webpack vs Rspack vs Vite
Membandingkan Module Federation 2.0 di tiga bundler: Webpack (matang), Rspack (cepat native Rust 5-10x), dan Vite (ESM native, DX terbaik). Membedah kapan memilih masing-masing, konfigurasi migrasi antar bundler, serta build performance di monorepo besar.
#Pendahuluan
Sejauh ini kita memakai Module Federation di Vite. Tetapi Module Federation tidak eksklusif untuk Vite — ia lintas bundler, dan pilihan bundler berpengaruh besar pada performa build dan workflow tim. Di episode ini kita membandingkan Webpack, Rspack, dan Vite sebagai platform Module Federation 2.0.
Mengapa penting? Karena microfrontend berarti kalian akan memiliki banyak aplikasi yang di-build terus-menerus — CI dijalankan per remote. Build yang lambat di kali banyak app dan banyak developer akan membuang banyak waktu. Memilih bundler yang tepat adalah investasi besar.
#Module Federation 2.0: Stabil (Feb 2026)
Sebelum membandingkan bundler, ingat bahwa Module Federation 2.0 sudah stabil sejak awal 2026, membawa tiga fitur kunci:
- Shared dependency tree-shaking — hanya bagian yang dipakai yang dibagikan.
- Dynamic federation —
loadRemotetanpa config build-time. - TypeScript type-safe (
dts) — remote di-type-check.
Ketiga fitur ini tersedia lintas bundler melalui plugin resmi, jadi pilihan bundler adalah soal DX, performa build, dan kesiapan enterprise.
#Pilihan Bundler
#Webpack 5 (Klasik, Matang)
Webpack adalah bundler paling dewasa dan paling banyak dipakai di enterprise, terutama codebase React/Vue yang sudah lama. Module Federation lahir dari Webpack 5. @module-federation/enhanced mendukung Webpack secara penuh.
Cocok untuk: project legacy yang sudah memakai Webpack; migrasi bertahap tanpa mengubah bundler.
#Rspack (Cepat, Native Rust)
Rspack adalah bundler berbasis Rust yang menggantikan Webpack dengan API yang hampir sama tetapi 5–10x lebih cepat dalam build. Didukung penuh oleh @module-federation/enhanced/rspack.
Cocok untuk: monorepo besar di mana build time adalah bottleneck; tim yang ingin Drop-in kecepatan Rust tanpa mengganti API Webpack.
#Vite (ESM Native, DX Terbaik)
Vite memakai ESM native di development — perubahan hot-reload hampir instan. Ini DX-terbaik untuk developer. @module-federation/vite menyatukan federasi ke Vite.
Cocok untuk: project baru, DX tinggi, development cepat dengan banyak remote.
| Bundler | Build Speed | DX Dev | Kematangan MF | Cocok Untuk |
|---|---|---|---|---|
| Webpack 5 | Lambat | Sedang | Paling matang | Legacy enterprise |
| Rspack | 5–10x cepat | Bagus | Dewasa | Monorepo besar |
| Vite | Cepat (dev) | Terbaik | Tumbuh | Project baru |
#Kapan Memilih
- Project baru → Vite atau Rspack (DX + kecepatan).
- Enterprise legacy Webpack → pakai enhanced webpack dan tetap di Webpack, atau migrasi bertahap ke Rspack.
- Monorepo besar dengan build lambat → Rspack untuk leverage kecepatan Rust.
Note
Kabar baiknya: plugin enhanced punya API yang hampir sama lintas bundler. Belajar satu (misal @module-federation/vite), dan konfigurasi di Webpack/Rspack hampir identik — jadi pilihan bundler tidak mengunci kalian secara konseptual.
#Konfigurasi Migrasi Antar Bundler
Karena API-nya konsisten, memindahkan konfigurasi federation(...) hampir selalu tinggal mengganti plugin importer. Contoh, migrasi Vite → Rspack:
import { federation } from '@module-federation/vite'
// plugins: [react(), federation({ ... })]import { federation } from '@module-federation/enhanced/rspack'
// module.rules + plugins: [federation({ ... })]Struktur objek konfigurasi (name, exposes, remotes, shared) sama — hanya cara plugin didaftarkan yang berbeda mengikuti konvensi bundler masing-masing.
#Build Performance
Untuk monorepo besar, performa build remote independen sangat krusial:
- Dengan Vite/Rspack, waktu build tiap remote turun drastis, sehingga CI per-remote lebih cepat.
- Remote cache (Turborepo/Nx, episode 19) mempercepat lebih jauh dengan tidak mengulang build yang tidak berubah.
- Independent build timeline: karena remote di-build terpisah, kegagalan build satu remote tidak menghalangi yang lain — keuntungan strategis microfrontend.
#Penutup
Pada episode 10 ini, kalian telah memahami perbandingan Module Federation 2.0 di tiga bundler.
Inti yang harus dibawa pulang:
- MF2 stabil (Feb 2026): tree-shaking shared, dynamic federation, type-safe.
- Webpack matang untuk legacy; Rspack 5–10x cepat (Rust); Vite DX terbaik (ESM).
- Project baru → Vite/Rspack; legacy → enhanced webpack.
- API plugin enhanced konsisten lintas bundler — belajar satu, terapkan lainnya.
- Build performance & remote cache krusial untuk monorepo besar.
Di episode 11 selanjutnya, kita akan membahas single-spa: framework-agnostic microfrontend — lifecycle bootstrap/mount/unmount, registrasi & router, kapan memakai single-spa vs Module Federation, dan pola kombinasi keduanya. Pastikan pilihan bundler kalian sudah mantap!