Pemberian Versi, Penerapan, dan Orkestrasi

Nilai utama Module Federation adalah penerapan independen: sebuah tim dapat memperbarui, menguji, dan menerapkan aplikasi penyedianya tanpa berkoordinasi dengan tim aplikasi pemuat atau memicu penerapan ulang aplikasi pemuat. Aplikasi pemuat mengambil perubahan secara otomatis saat berikutnya memuat remoteEntry.js dari URL aplikasi penyedia.

Alih-alih menyajikan remoteEntry.js pada URL tetap yang berubah setiap kali penerapan dilakukan, sertakan hash konten dalam URL: remoteEntry.[hash].js. Dengan demikian, setiap penerapan tidak dapat diubah—URL lama terus berfungsi, dan aplikasi pemuat merujuk hash baru setelah diperbarui ke penerapan baru. URL yang tidak dapat diubah memungkinkan penyimpanan dalam CDN secara agresif.

Karena aplikasi pemuat menemukan aplikasi penyedia melalui URL, Anda dapat menerapkan pengujian A/B pada tingkat infrastruktur: berikan URL remoteEntry.js yang berbeda kepada pengguna yang berbeda, dengan URL tersebut mengarah ke versi aplikasi penyedia yang berbeda. Hal ini memungkinkan penerapan kanari yang sebenarnya untuk mikro-frontend tanpa logika penanda fitur apa pun dalam kode aplikasi.

Alih-alih menanamkan URL aplikasi penyedia secara permanen dalam konfigurasi Webpack, aplikasi pemuat mengambil manifest JSON saat dimulai: GET /federation-manifest.json mengembalikan { buttonApp: 'https://cdn.example.com/button/remoteEntry.abc123.js' }. Untuk memperbarui versi yang digunakan aplikasi pemuat, perbarui manifest tersebut—tidak perlu membangun ulang aplikasi pemuat.

Saat penerapan aplikasi penyedia menimbulkan regresi, pemulihan dapat dilakukan seketika: perbarui federation-manifest.json agar mengarah ke URL remoteEntry.js sebelumnya. Aplikasi pemuat segera mulai menggunakan versi lama pada siklus permintaan berikutnya. Tidak perlu membangun ulang aplikasi pemuat, memulihkan aplikasi pemuat, atau berkoordinasi.

Module Federation 2.0 (paket @module-federation/enhanced) menghadirkan peningkatan signifikan: dukungan TypeScript yang lebih baik dengan pembuatan tipe otomatis dari manifes modul jarak jauh, API pengaya saat waktu berjalan untuk logika pemuatan khusus, serta pengelolaan cakupan bersama yang lebih baik untuk skenario negosiasi versi yang kompleks.

Paket vite-plugin-federation menghadirkan Module Federation ke proyek berbasis Vite dengan menggunakan API konfigurasi yang serupa dengan ModuleFederationPlugin milik Webpack. Paket ini kompatibel dengan modul jarak jauh Vite dan aplikasi induk Webpack, begitu pula sebaliknya, sehingga tim dapat berpindah ke Vite secara bertahap tanpa meninggalkan Module Federation.

Untuk arsitektur yang sangat dinamis, Anda dapat mengonfigurasi URL modul jarak jauh sepenuhnya saat waktu berjalan: import(remoteRegistry[featureName]) ketika remoteRegistry diisi melalui panggilan ke antarmuka pemrograman aplikasi. Dengan demikian, Anda dapat membangun arsitektur seperti pengaya, tempat mikro-frontend baru dapat ditambahkan tanpa membangun ulang aplikasi inti.

Tugas utama aplikasi inti adalah mengatur orkestrasi: membaca manifes modul jarak jauh, menginisialisasi lingkungan waktu berjalan Module Federation, mendaftarkan modul jarak jauh pada rute bernama, lalu menampilkan modul jarak jauh yang sesuai berdasarkan URL saat ini. Aplikasi inti sengaja dibuat sederhana—aplikasi ini mengetahui apa yang harus dimuat, bukan cara menampilkannya.

Tambahkan pemantauan kinerja pada pemuatan modul jarak jauh: bungkus impor modul jarak jauh dalam try/catch agar kegagalan pemuatan dapat ditangani dengan baik (tampilkan antarmuka cadangan jika modul jarak jauh tidak tersedia), ukur waktu yang diperlukan untuk mengunduh remoteEntry.js dan potongan komponen, lalu berikan peringatan jika waktu pemuatan modul jarak jauh melampaui ambang batas (yang menunjukkan adanya masalah CDN).

Alur CI/CD Module Federation yang matang terlihat seperti ini: tim modul jarak jauh mengirimkan perubahan → CI membangun modul jarak jauh → mengunggah remoteEntry.[hash].js yang tidak berubah ke CDN → memperbarui federation-manifest.json → aplikasi induk mengambil modul jarak jauh baru pada permintaan pengguna berikutnya. Setiap langkah diotomatisasi, dan tim aplikasi induk tidak pernah terlibat dalam penerapan modul jarak jauh.

Apa cara tercepat untuk mengembalikan penerapan modul jarak jauh Module Federation yang bermasalah?

Module Federation memungkinkan penerapan yang benar-benar independen: modul jarak jauh dapat diterapkan tanpa membangun ulang aplikasi induk, dan aplikasi induk menemukan versi baru secara otomatis. Gunakan URL modul jarak jauh dengan hash konten untuk caching CDN yang tidak berubah serta manifes dinamis untuk perutean versi yang fleksibel dan pengembalian secara langsung. vite-plugin-federation menghadirkan kemampuan ini ke Vite, sedangkan impor modul jarak jauh yang dinamis memungkinkan arsitektur seperti pengaya. Aplikasi inti mengatur pemuatan modul jarak jauh dan sengaja dibuat sederhana.