Modül Federasyonu: Dinamik Çalışma Zamanı İçe Aktarmaları

Çok ekipli bir ön yüz organizasyonunda, bağımsız olarak dağıtılan birden çok uygulamanın kullanıcı arayüzü bileşenlerini ve yardımcı programları paylaşması çoğu zaman gerekir. npm'e yayımlamak; sürüm numarasını artırmayı, yeni bir sürüm yayımlamayı ve kullanan tüm uygulamaları yeniden dağıtmayı gerektirir. Bu da ekipler arasında sıkı bir bağımlılık ve yavaş yineleme döngüleri oluşturur.

Geleneksel yaklaşımda (paylaşılan kodu npm paketi olarak yayımlamak), ortak bir düğme bileşenini güncellemek için şunlar gerekir: npm paketini güncellemek, yeni bir sürüm yayımlamak, kullanan her uygulamanın package.json dosyasını güncellemek, kullanan her uygulamayı yeniden derleyip yeniden dağıtmak. Module Federation tüm bu adımları ortadan kaldırır.

Module Federation, bir uygulamanın ("uzak uygulama") JavaScript modüllerini başka bir uygulamanın ("ana uygulama") yeniden derleme veya yeniden dağıtım olmadan çalışma zamanında yükleyip çalıştırmak üzere dışa açmasına olanak tanır. Kullanıcı ana uygulamayı yüklediğinde, uzak uygulamanın modüllerini gerektiğinde dinamik olarak alır.

Webpack 5, Module Federation'ı ModuleFederationPlugin aracılığıyla birinci sınıf, yerleşik bir özellik olarak kullanıma sundu. Webpack 5'ten önce benzer yaklaşımlar karmaşık elle yapılandırmalar veya üçüncü taraf eklentileri gerektiriyordu. Eklenti, tüm dinamik yükleme ve paylaşılan kapsam yönetimini otomatik olarak gerçekleştirir.

Uzak uygulama, diğer uygulamaların kullanması için bir veya daha fazla modülü — React bileşenleri, yardımcı programlar veya tüm özellik sayfaları — dışa açan bağımsız olarak dağıtılan bir uygulamadır. Uzak uygulama, dışa açtığı öğeleri ve bunların nasıl yükleneceğini açıklayan bir remoteEntry.js bildirimi oluşturur.

Ana uygulama, bir veya daha fazla uzak uygulamadaki modülleri kullanan uygulamadır. Ana uygulama, Webpack yapılandırmasında uzak uygulamalara adları ve URL'leriyle başvurur. Ana uygulamanın kodu bir uzak modülü içe aktardığında, Webpack'in Module Federation çalışma zamanı bu modülü uzak uygulamanın URL'sinden dinamik olarak alıp çalıştırır.

Paylaşılan modüller, hem ana uygulama hem de uzak uygulama içerse bile yalnızca bir kez yüklenmesi gereken kütüphanelerdir (React ve React DOM gibi). React'i paylaşılan tekil bir modül olarak işaretlemek, Module Federation'ın yalnızca bir React sürümünün çalışmasını sağlamasına yardımcı olur; bu önemlidir çünkü React kancaları birden çok örnekle bozulur.

Bir uzak uygulama oluşturduğunuzda Webpack, yapılandırılan dosya adında bir remoteEntry.js dosyası oluşturur. Bu dosya, hafif bir bildirim ve başlatma betiğidir: uzak uygulamanın dışa açtığı modülleri bildirir, bunların parça URL'lerini listeler ve paylaşılan kapsamı başlatır. Ana uygulama, uzak uygulamanın sunduklarını keşfetmek için önce bu dosyayı indirir.

Ana uygulama bir uzak modülden yapılan içe aktarmayla karşılaştığında, uzak uygulamanın kodunun zaten yüklenip yüklenmediğini kontrol eder. Yüklenmemişse uzak uygulamanın URL'sinden remoteEntry.js dosyasını alır, paylaşılan kapsamı başlatır (paylaşılan kütüphane sürümlerini uzlaştırır), ardından istenen modülü içeren belirli parçayı indirip çalıştırır.

Bir ekip, ana uygulamaya dokunmadan uzak uygulamasının yeni bir sürümünü (güncellenmiş Button bileşenini) dağıtır. Ana uygulamayı yükleyen bir sonraki kullanıcı yeni Button bileşenini otomatik olarak alır; çünkü ana uygulama her zaman güncel remoteEntry.js URL'sinden veri alır. Ana uygulamayı yeniden derleme yoktur, ana uygulamayı yeniden dağıtma yoktur, koordinasyon gerekmez.

Daha eski bir mikro ön yüz yaklaşımı, ekiplerin sahip olduğu bölümleri yalıtmak için satır içi çerçeveler kullanır. Satır içi çerçeveler güçlü bir yalıtım sağlar; ancak paylaşılan durumu, URL yönlendirmesini ve stillendirmeyi son derece zorlaştırır. Module Federation her şeyi aynı JavaScript bağlamında tutarak paylaşılan yönlendirmeyi, paylaşılan kimlik doğrulama durumunu ve tutarlı stillendirmeyi mümkün kılar.

Module Federation'da remoteEntry.js'in rolü nedir?

Module Federation, çalışma zamanında modül yüklemeyi mümkün kılarak paylaşılan ön yüz kodunda bağımsız dağıtım sorununu çözer. Uzak uygulamalar modülleri remoteEntry.js aracılığıyla dışa açar; ana uygulamalar bunları yeniden derleme yapmadan dinamik olarak kullanır. Paylaşılan tekil modüller (React, React DOM) kütüphanelerin yinelenen yüklenmesini önler. Bu mimari gerçek bağımsız dağıtımı mümkün kılar: bir uzak uygulamayı güncellediğinizde tüm ana uygulamalar değişikliği hemen görür.