Dasar-Dasar Federasi Modul

Federasi Modul memungkinkan aplikasi JavaScript memuat dan mengeksekusi kode dari aplikasi lain yang diterapkan secara independen saat aplikasi berjalan. Berawal dari Webpack 5, pola ini sekarang juga dapat diterapkan melalui peta impor bawaan dan impor dinamis.

Organisasi besar memecah monolit menjadi beberapa "mikro-frontend" yang diterapkan secara independen—sebuah host utama dan beberapa aplikasi fitur. Federasi modul memungkinkan host memuat setiap fitur sesuai kebutuhan tanpa menggabungkannya saat proses pembuatan.

Di Webpack 5, host mendeklarasikan remotes (aplikasi lain yang akan digunakan), sedangkan aplikasi jarak jauh mendeklarasikan exposes (hal yang mereka sediakan). Saat aplikasi berjalan, sebuah manifes kecil diambil dari setiap aplikasi jarak jauh saat mulai, lalu potongan diunduh ketika host mengimpornya.

Tanpa Webpack, gagasan yang sama dapat diterapkan dengan peta impor yang menunjuk ke bundel ESM jarak jauh dan impor dinamis untuk pemuatan. Peta impor host menyatakan "feature-cart": "https://cart-team.example.com/entry.js"; import("feature-cart") memuat versi terbaru yang telah diterapkan.

Tanpa koordinasi, setiap aplikasi jarak jauh akan menyertakan salinannya sendiri dari React. Alat federasi memungkinkan deklarasi dependensi bersama—aplikasi jarak jauh pertama yang memuat React membuatnya tersedia untuk semua aplikasi lainnya. Pendekatan bawaan menggunakan peta impor untuk mengarahkan semua aplikasi jarak jauh ke URL React yang sama.

Setiap tim memiliki aplikasi jarak jauhnya sendiri dan dapat menerapkannya kapan saja. Host tidak pernah perlu dibuat ulang; host mengambil versi baru saat pemuatan halaman berikutnya (atau melalui pengosongan tembolok). Cara ini sepenuhnya memisahkan siklus rilis.

Sematkan aplikasi jarak jauh ke URL berversi (/v1/entry.js, /v2/entry.js) agar peningkatan host dilakukan secara sengaja, bukan secara tersirat. Beberapa tim menggunakan pencocokan semver pada tingkat peta impor melalui alat seperti JSPM.

Federasi menambah kerumitan saat berjalan: lebih banyak permintaan jaringan, penelusuran kesalahan lintas asal yang lebih sulit, dan risiko dependensi bersama yang tidak kompatibel. Gunakan cara ini saat Anda benar-benar memerlukan penerapan independen; untuk proyek yang lebih kecil, satu proses pembuatan lebih sederhana dan cepat.

Satu modul jarak jauh yang mengalami kerusakan tidak boleh membuat aplikasi induk ikut berhenti. Bungkus impor dinamis dengan batas kesalahan (React) atau try/catch (JavaScript biasa), lalu tampilkan antarmuka cadangan ketika modul jarak jauh gagal. Kerangka aplikasi tetap berfungsi meskipun suatu fitur sementara rusak.

Ekspor dari modul jarak jauh tidak memiliki informasi tipe saat kompilasi di aplikasi induk. Buat tipe TypeScript bersama dalam paket terpisah yang digunakan oleh kedua sisi, atau gunakan validasi saat dijalankan (Zod, io-ts) pada batas federasi.

Federasi bawaan (peta impor + ESM) lebih sederhana dan berbasis standar, tetapi tidak memiliki koordinasi dependensi bersama seperti pada Webpack. Pilih Webpack/Module Federation untuk aplikasi kompleks dengan banyak dependensi bersama; pilih federasi bawaan untuk penyiapan mikro-frontend yang lebih sederhana.

W3C sedang mengeksplorasi primitif pemuatan modul yang lebih kaya agar federasi bawaan menjadi lebih mumpuni — termasuk negosiasi dependensi bersama yang lebih baik. Saat ini, anggap peta impor sebagai fondasi, lalu tambahkan perkakas federasi di atasnya.

Apa motivasi utama menggunakan Module Federation dalam aplikasi besar?

Module Federation memungkinkan aplikasi induk memuat kode dari modul jarak jauh yang diterapkan secara mandiri saat runtime. Perkakas Webpack 5 menambahkan negosiasi dependensi bersama; federasi bawaan menggunakan peta impor dan impor dinamis. Gunakan pendekatan ini untuk arsitektur mikro-frontend dengan banyak tim; terima kompleksitas tambahan sebagai imbalan atas kebebasan menerapkan setiap bagian secara mandiri.