Module Federation: dynaamiset ajonaikaiset tuonnit

Monitiimisessä frontend-organisaatiossa useiden itsenäisesti käyttöönotettavien sovellusten on usein jaettava käyttöliittymäkomponentteja ja apuohjelmia. Julkaiseminen npm:ään edellyttää versionumeron kasvattamista, uuden julkaisun tekemistä ja jokaisen kuluttavan sovelluksen täydellistä uudelleenkäyttöönottoa — tämä sitoo tiimit tiukasti toisiinsa ja hidastaa iteraatioita.

Perinteinen lähestymistapa (jaetun koodin julkaiseminen npm-pakettina) tarkoittaa, että jaetun painikekomponentin päivittäminen edellyttää seuraavia vaiheita: npm-paketin päivittäminen, uuden version julkaiseminen, jokaisen sitä käyttävän sovelluksen package.json-tiedoston päivittäminen sekä kaikkien näiden sovellusten uudelleenkoonti ja uudelleenkäyttöönotto. Module Federation poistaa kaikki nämä vaiheet.

Module Federation sallii yhden sovelluksen ("remoten") asettaa JavaScript-moduuleja toisen sovelluksen ("hostin") ladattaviksi ja suoritettaviksi ajonaikana ilman hostin uudelleenkääntämistä tai uudelleenkäyttöönottoa. Kun käyttäjä lataa host-sovelluksen, se noutaa remoten moduulit dynaamisesti tarpeen mukaan.

Webpack 5 esitteli Module Federationin ensiluokkaisena sisäänrakennettuna ominaisuutena ModuleFederationPluginin kautta. Ennen Webpack 5:tä vastaavat mallit edellyttivät monimutkaista manuaalista määritystä tai kolmannen osapuolen plugineja. Plugin hoitaa kaiken dynaamisen lataamisen ja shared scope -hallinnan automaattisesti.

Remote on itsenäisesti käyttöönotettava sovellus, joka tarjoaa yhden tai useamman moduulin — React-komponentteja, apuohjelmia tai kokonaisia ominaisuussivuja — muiden sovellusten käytettäväksi. Remote muodostaa remoteEntry.js-manifestin, joka kuvaa sen tarjoaman sisällön ja lataustavan.

Host on sovellus, joka käyttää yhden tai useamman remoten moduuleja. Host viittaa remoteihin nimillä ja URL-osoitteilla Webpack-määrityksessään. Kun hostin koodi tuo remote-moduulin, Webpackin Module Federation -runtime noutaa ja suorittaa sen dynaamisesti remoten URL-osoitteesta.

Jaetut moduulit ovat kirjastoja (kuten React ja React DOM), jotka tulisi ladata vain kerran, vaikka sekä host että remote sisältäisivät ne. Merkitsemällä Reactin jaetuksi singletoniksi Module Federation varmistaa, että käytössä on vain yksi React-versio — tämä on kriittistä, koska Reactin hookit rikkoutuvat useiden instanssien kanssa.

Kun rakennat remoten, Webpack luo remoteEntry.js-tiedoston määritettyyn tiedostonimeen. Tämä tiedosto on kevyt manifesti ja bootstrap-skripti: se ilmoittaa, mitä moduuleja remote tarjoaa, luettelee niiden chunk-URL-osoitteet ja alustaa shared scopen. Host lataa tämän tiedoston ensin selvittääkseen, mitä remote tarjoaa.

Kun host kohtaa remotemoduulin tuonnin, se tarkistaa, onko remoten koodi jo ladattu. Jos ei ole, se noutaa remoteEntry.js-tiedoston remoten URL-osoitteesta, alustaa shared scopen (neuvottelee jaettujen kirjastojen versioista) ja lataa ja suorittaa sitten pyydetyn moduulin sisältävän chunkin.

Tiimi ottaa käyttöön remoten uuden version (päivitetyn Button-komponentin) koskematta host-sovellukseen. Seuraava käyttäjä, joka lataa hostin, saa uuden Button-komponentin automaattisesti, koska host noutaa aina nykyisestä remoteEntry.js-URL-osoitteesta. Hostin koontia tai käyttöönottoa ei tarvita, eikä koordinointia tarvita.

Vanhemmassa mikrofrontend-mallissa tiimien omistamat osiot eristetään iframe-kehyksillä. Iframe-kehykset tarjoavat vahvan eristyksen, mutta jaettu tila, URL-reititys ja tyylit ovat niiden kanssa erittäin vaikeita toteuttaa. Module Federation pitää kaiken samassa JavaScript-kontekstissa, mikä mahdollistaa jaetun reitityksen, jaetun auth-tilan ja yhtenäisen tyylityksen.

Module Federation ratkaisee jaetun frontend-koodin itsenäisen käyttöönoton ongelman mahdollistamalla moduulien lataamisen ajonaikana. Remotet tarjoavat moduuleja remoteEntry.js:n kautta, ja hostit käyttävät niitä dynaamisesti ilman uudelleenkääntämistä. Jaetut singletonit (React, React DOM) estävät kirjastojen lataamisen useaan kertaan. Tämä arkkitehtuuri mahdollistaa aidosti itsenäisen käyttöönoton: kun remote päivitetään, kaikki host-sovellukset näkevät muutoksen heti.