Federasi Modul: Impor Runtime Dinamis

Dalam organisasi pengembangan antarmuka multitim, beberapa aplikasi yang diterapkan secara independen sering kali perlu berbagi komponen antarmuka dan utilitas. Menerbitkannya ke npm memerlukan peningkatan versi, rilis baru, dan penerapan ulang penuh untuk setiap aplikasi pemakai—sehingga menciptakan keterikatan erat antartim dan siklus iterasi yang lambat.

Pendekatan tradisional, yaitu menerbitkan kode bersama sebagai paket npm, berarti bahwa memperbarui komponen tombol bersama memerlukan langkah-langkah berikut: memperbarui paket npm, menerbitkan versi baru, memperbarui package.json setiap aplikasi pemakai, membangun ulang dan menerapkan ulang setiap aplikasi pemakai. Module Federation menghapus semua langkah tersebut.

Module Federation memungkinkan satu aplikasi, yaitu aplikasi penyedia, mengekspos modul JavaScript yang dimuat dan dijalankan aplikasi lain, yaitu aplikasi pemuat, saat berjalan, tanpa membangun ulang atau menerapkan ulang aplikasi pemuat. Saat pengguna memuat aplikasi pemuat, aplikasi tersebut mengambil modul aplikasi penyedia secara dinamis sesuai permintaan.

Webpack 5 memperkenalkan Module Federation sebagai fitur bawaan utama melalui ModuleFederationPlugin. Sebelum Webpack 5, pola serupa memerlukan konfigurasi manual yang rumit atau plugin pihak ketiga. Plugin tersebut menangani seluruh pemuatan dinamis dan pengelolaan cakupan bersama secara otomatis.

Aplikasi penyedia adalah aplikasi yang diterapkan secara independen dan mengekspos satu atau beberapa modul—komponen React, utilitas, atau seluruh halaman fitur—untuk digunakan aplikasi lain. Aplikasi penyedia membangun manifest remoteEntry.js yang menjelaskan apa saja yang diekspos dan cara memuatnya.

Aplikasi pemuat adalah aplikasi yang menggunakan modul dari satu atau beberapa aplikasi penyedia. Aplikasi pemuat merujuk aplikasi penyedia berdasarkan nama dan URL dalam konfigurasi Webpack-nya. Saat kode aplikasi pemuat mengimpor modul dari aplikasi penyedia, runtime Module Federation Webpack mengambil dan menjalankannya secara dinamis dari URL aplikasi penyedia.

Modul bersama adalah pustaka, seperti React dan React DOM, yang seharusnya hanya dimuat sekali, meskipun aplikasi pemuat dan aplikasi penyedia sama-sama menyertakannya. Dengan menandai React sebagai singleton bersama, Module Federation memastikan hanya satu versi React yang berjalan—hal yang penting karena pengait React bermasalah jika ada beberapa instans.

Saat Anda membangun aplikasi penyedia, Webpack menghasilkan berkas remoteEntry.js pada nama berkas yang dikonfigurasi. Berkas ini adalah manifest ringan sekaligus skrip pemula: berkas ini menyatakan modul apa yang diekspos aplikasi penyedia, mencantumkan URL potongannya, dan menginisialisasi cakupan bersama. Aplikasi pemuat mengunduh berkas ini terlebih dahulu untuk mengetahui apa yang ditawarkan aplikasi penyedia.

Saat aplikasi pemuat menemukan import dari modul penyedia, aplikasi tersebut memeriksa apakah kode penyedia sudah dimuat. Jika belum, aplikasi tersebut mengambil remoteEntry.js dari URL penyedia, menginisialisasi cakupan bersama dengan menegosiasikan versi pustaka bersama, lalu mengunduh dan menjalankan potongan khusus yang berisi modul yang diminta.

Sebuah tim menerapkan versi baru aplikasi penyedia, yaitu komponen Button yang diperbarui, tanpa menyentuh aplikasi pemuat. Pengguna berikutnya yang memuat aplikasi pemuat akan mendapatkan Button baru secara otomatis karena aplikasi pemuat selalu mengambil dari URL remoteEntry.js terbaru. Tidak perlu membangun ulang aplikasi pemuat, menerapkan ulang aplikasi pemuat, atau berkoordinasi.

Pola mikro-frontend lama menggunakan bingkai sebaris untuk mengisolasi bagian-bagian yang dimiliki tim. Bingkai sebaris memberikan isolasi yang kuat, tetapi membuat status bersama, perutean URL, dan gaya visual menjadi sangat sulit. Module Federation menjaga semuanya dalam konteks JavaScript yang sama, sehingga memungkinkan perutean bersama, status autentikasi bersama, dan gaya visual yang konsisten.

Apa peran remoteEntry.js dalam Module Federation?

Module Federation mengatasi masalah penerapan independen untuk kode frontend bersama dengan memungkinkan pemuatan modul saat berjalan. Aplikasi penyedia mengekspos modul melalui remoteEntry.js; aplikasi pemuat menggunakannya secara dinamis tanpa membangun ulang. Singleton bersama, yaitu React dan React DOM, mencegah pemuatan pustaka ganda. Arsitektur ini memungkinkan penerapan independen yang sebenarnya: perbarui aplikasi penyedia dan semua aplikasi pemuat akan segera melihat perubahan tersebut.