Module Federation: dynamiczne importy w czasie działania

W organizacji frontendowej pracującej w wielu zespołach kilka niezależnie wdrażanych aplikacji często musi współdzielić komponenty interfejsu i narzędzia pomocnicze. Publikowanie ich w npm wymaga zwiększenia numeru wersji, wydania nowej wersji i pełnego ponownego wdrożenia każdej aplikacji korzystającej z pakietu — co tworzy ścisłe powiązanie między zespołami i spowalnia cykle wprowadzania zmian.

Tradycyjne podejście, czyli publikowanie współdzielonego kodu jako pakietu npm, oznacza, że aktualizacja współdzielonego komponentu przycisku wymaga: zaktualizowania pakietu npm, opublikowania nowej wersji, zaktualizowania package.json każdej aplikacji korzystającej z pakietu oraz przebudowania i ponownego wdrożenia każdej z tych aplikacji. Module Federation eliminuje wszystkie te kroki.

Module Federation pozwala jednej aplikacji (remote) udostępniać moduły JavaScript, które inna aplikacja (host) ładuje i wykonuje w czasie działania, bez przebudowywania ani ponownego wdrażania hosta. Gdy użytkownik ładuje aplikację hosta, pobiera ona dynamicznie moduły zdalnej aplikacji na żądanie.

Webpack 5 wprowadził Module Federation jako wbudowaną funkcję pierwszej klasy za pośrednictwem ModuleFederationPlugin. Przed Webpack 5 podobne rozwiązania wymagały złożonej ręcznej konfiguracji lub wtyczek innych firm. Wtyczka automatycznie obsługuje całe dynamiczne ładowanie oraz zarządzanie współdzielonym zakresem.

Remote to niezależnie wdrażana aplikacja, która udostępnia co najmniej jeden moduł — komponent React, narzędzia pomocnicze lub całe strony funkcjonalne — do wykorzystania przez inne aplikacje. Remote tworzy manifest remoteEntry.js, który opisuje udostępniane elementy i sposób ich ładowania.

Host to aplikacja korzystająca z modułów co najmniej jednego remote. Host odwołuje się do remote po nazwie i adresie URL w konfiguracji Webpacka. Gdy kod hosta importuje moduł remote, środowisko uruchomieniowe Module Federation dynamicznie pobiera go i wykonuje z adresu URL remote.

Współdzielone moduły to biblioteki (takie jak React i React DOM), które powinny zostać załadowane tylko raz, nawet jeśli zawierają je zarówno host, jak i remote. Oznaczenie React jako współdzielonego singletonu gwarantuje, że działa tylko jedna wersja Reacta — jest to kluczowe, ponieważ hooki Reacta przestają działać przy wielu instancjach.

Podczas budowania remote Webpack generuje plik remoteEntry.js pod skonfigurowaną nazwą. Ten plik jest lekkim manifestem i skryptem inicjalizującym: deklaruje, jakie moduły udostępnia remote, zawiera adresy URL ich chunków i inicjalizuje współdzielony zakres. Host najpierw pobiera ten plik, aby sprawdzić, co oferuje remote.

Gdy host napotyka import modułu remote, sprawdza, czy kod remote został już załadowany. Jeśli nie, pobiera remoteEntry.js z adresu URL remote, inicjalizuje współdzielony zakres (uzgadniając wersje współdzielonych bibliotek), a następnie pobiera i wykonuje konkretny chunk zawierający żądany moduł.

Zespół wdraża nową wersję swojego remote (ze zaktualizowanym komponentem Button), nie modyfikując aplikacji hosta. Następny użytkownik, który załaduje hosta, automatycznie otrzyma nowy Button, ponieważ host zawsze pobiera dane z bieżącego adresu URL remoteEntry.js. Nie jest potrzebna przebudowa hosta, ponowne wdrożenie hosta ani koordynacja.

Starszy wzorzec mikrofrontendowy wykorzystuje iframe'y do izolowania sekcji należących do poszczególnych zespołów. Iframe'y zapewniają silną izolację, ale bardzo utrudniają współdzielenie stanu, routing adresów URL i stylowanie. Module Federation utrzymuje wszystko w tym samym kontekście JavaScript, umożliwiając współdzielenie routingu, stanu uwierzytelniania i spójnych stylów.

Jaka jest rola remoteEntry.js w Module Federation?

Module Federation rozwiązuje problem niezależnego wdrażania współdzielonego kodu frontendowego, umożliwiając ładowanie modułów w czasie działania. Remotes udostępniają moduły za pośrednictwem remoteEntry.js, a hosty korzystają z nich dynamicznie, bez przebudowywania. Współdzielone singletony (React, React DOM) zapobiegają wielokrotnemu ładowaniu bibliotek. Ta architektura umożliwia prawdziwie niezależne wdrażanie: po zaktualizowaniu remote'a wszystkie aplikacje hosta natychmiast widzą zmianę.