JavaScript Module Federation'i Meistriklass: Jagatud Skoobi ja Sõltuvuste Jagamise Vägi

Kiiresti areneval veebiarenduse maastikul hõlmab skaleeritavate ja hooldatavate rakenduste loomine sageli keerukate arhitektuuriliste mustrite kasutuselevõttu. Nende hulgas on mikroesirakenduste kontseptsioon saavutanud märkimisväärse populaarsuse, võimaldades meeskondadel rakenduse osi iseseisvalt arendada ja juurutada. Nende iseseisvate üksuste sujuva integreerimise ja tõhusa koodijagamise keskmes on Webpacki Module Federation plugin ja selle võimsuse oluline komponent on jagatud skoop.

See põhjalik juhend sukeldub sügavale JavaScript Module Federation'i jagatud skoobi mehhanismi. Uurime, mis see on, miks see on sõltuvuste jagamisel hädavajalik, kuidas see töötab ja millised on praktilised strateegiad selle tõhusaks rakendamiseks. Meie eesmärk on anda arendajatele teadmised selle võimsa funktsiooni kasutamiseks, et parandada jõudlust, vähendada kogumite suurust ja parandada arendajakogemust erinevates globaalsetes arendusmeeskondades.

Mis on JavaScript Module Federation?

Enne jagatud skoobi süvenemist on oluline mõista Module Federation'i aluskontseptsiooni. Webpack 5-ga kasutusele võetud Module Federation on ehitamis- ja käitusaja lahendus, mis võimaldab JavaScripti rakendustel dünaamiliselt jagada koodi (näiteks teeke, raamistikke või isegi terveid komponente) eraldi kompileeritud rakenduste vahel. See tähendab, et teil võib olla mitu eraldiseisvat rakendust (sageli nimetatud 'kaugrakendusteks' või 'tarbijateks'), mis saavad laadida koodi 'konteiner'- või 'host'-rakendusest ja vastupidi.

Module Federation'i peamised eelised on järgmised:

• Koodi jagamine: Kõrvaldage üleliigne kood mitmes rakenduses, vähendades üldisi kogumite suurusi ja parandades laadimisaegu.
• Iseseisev juurutamine: Meeskonnad saavad suure rakenduse erinevaid osi iseseisvalt arendada ja juurutada, soodustades agiilsust ja kiiremaid väljalasketsükleid.
• Tehnoloogiast sõltumatus: Kuigi seda kasutatakse peamiselt Webpackiga, hõlbustab see teatud määral jagamist erinevate ehitustööriistade või raamistike vahel, edendades paindlikkust.
• Käitusaja integratsioon: Rakendusi saab komponeerida käitusajal, mis võimaldab dünaamilisi värskendusi ja paindlikke rakendusstruktuure.

Probleem: Liigsed Sõltuvused Mikroesirakendustes

Kujutage ette stsenaariumi, kus teil on mitu mikroesirakendust, mis kõik sõltuvad sama versiooniga populaarsest kasutajaliidese teegist nagu React või olekuhalduse teegist nagu Redux. Ilma jagamismehhanismita komplekteeriks iga mikroesirakendus oma koopia nendest sõltuvustest. See viib:

• Paisunud kogumite suuruseni: Iga rakendus dubleerib asjatult ühiseid teeke, mis toob kaasa suuremad allalaadimismahud kasutajatele.
• Suurenenud mälukasutuseni: Sama teegi mitme eksemplari laadimine brauseris võib tarbida rohkem mälu.
• Ebajärjekindla käitumiseni: Jagatud teekide erinevad versioonid rakenduste vahel võivad põhjustada peeneid vigu ja ühilduvusprobleeme.
• Raisatud võrguressurssideni: Kasutajad võivad sama teegi alla laadida mitu korda, kui nad navigeerivad erinevate mikroesirakenduste vahel.

Siin tulebki mängu Module Federation'i jagatud skoop, pakkudes elegantset lahendust nendele väljakutsetele.

Module Federation'i Jagatud Skoobi Mõistmine

Jagatud skoop, mida sageli konfigureeritakse Module Federation'i plugina shared valiku kaudu, on mehhanism, mis võimaldab mitmel iseseisvalt juurutatud rakendusel jagada sõltuvusi. Kui see on konfigureeritud, tagab Module Federation, et määratud sõltuvuse üksainus eksemplar laaditakse ja tehakse kättesaadavaks kõikidele seda vajavatele rakendustele.

Oma olemuselt töötab jagatud skoop, luues jagatud moodulite jaoks globaalse registri või konteineri. Kui rakendus taotleb jagatud sõltuvust, kontrollib Module Federation seda registrit. Kui sõltuvus on juba olemas (st teise rakenduse või hosti poolt laaditud), kasutab see olemasolevat eksemplari. Vastasel juhul laadib see sõltuvuse ja registreerib selle jagatud skoobis tulevaseks kasutamiseks.

Konfiguratsioon näeb tavaliselt välja selline:

            // webpack.config.js

const { ModuleFederationPlugin } = require('webpack');

module.exports = {
  // ... muud webpacki konfiguratsioonid
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        'app1': 'app1@http://localhost:3001/remoteEntry.js',
        'app2': 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        'react': {
          singleton: true,
          eager: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          eager: true,
          requiredVersion: '^18.0.0',
        },
      },
    }),
  ],
};

            

              
                Copy
              
            
          

Jagatud Sõltuvuste Peamised Konfiguratsioonivalikud:

• singleton: true: See on ehk kõige kriitilisem valik. Kui see on seatud väärtusele true, tagab see, et jagatud sõltuvusest laaditakse kõigi tarbivate rakenduste peale ainult üks eksemplar. Kui mitu rakendust üritavad laadida sama singleton-sõltuvust, pakub Module Federation neile sama eksemplari.
• eager: true: Vaikimisi laaditakse jagatud sõltuvused laisalt, mis tähendab, et neid hangitakse alles siis, kui neid selgesõnaliselt imporditakse või kasutatakse. Seades eager: true, sunnitakse sõltuvus laadima kohe rakenduse käivitamisel, isegi kui seda kohe ei kasutata. See võib olla kasulik kriitiliste teekide, näiteks raamistike jaoks, et tagada nende kättesaadavus algusest peale.
• requiredVersion: '...': See valik määrab jagatud sõltuvuse nõutava versiooni. Module Federation üritab leida vastava versiooni. Kui mitu rakendust nõuavad erinevaid versioone, on Module Federation'il mehhanismid selle käsitlemiseks (arutatakse hiljem).
• version: '...': Saate selgesõnaliselt määrata sõltuvuse versiooni, mis jagatud skoopi avaldatakse.
• import: false: See seade ütleb Module Federation'ile, et ta ei komplekteeriks jagatud sõltuvust automaatselt. Selle asemel eeldab see, et see on väliselt pakutud (mis on jagamisel vaikimisi käitumine).
• packageDir: '...': Määrab paketi kataloogi, kust jagatud sõltuvus lahendada, mis on kasulik monorepodes.

Kuidas Jagatud Skoop Sõltuvuste Jagamist Võimaldab

Vaatame protsessi läbi praktilise näite abil. Kujutage ette, et meil on peamine 'konteiner'-rakendus ja kaks 'kaugrakendust', `app1` ja `app2`. Kõik kolm rakendust sõltuvad `react`-ist ja `react-dom`-ist versiooniga 18.

Stsenaarium 1: Konteinerrakendus Jagab Sõltuvusi

Selles levinud seadistuses määratleb konteinerrakendus jagatud sõltuvused. Module Federation'i genereeritud fail `remoteEntry.js` eksponeerib need jagatud moodulid.

Konteineri Webpacki Konfiguratsioon (`container/webpack.config.js`):

            const { ModuleFederationPlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App',
      },
      shared: {
        'react': {
          singleton: true,
          eager: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          eager: true,
          requiredVersion: '^18.0.0',
        },
      },
    }),
  ],
};

            

              
                Copy
              
            
          

Nüüd tarbivad `app1` ja `app2` neid jagatud sõltuvusi.

`app1` Webpacki Konfiguratsioon (`app1/webpack.config.js`):

            const { ModuleFederationPlugin } = require('webpack');

module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Feature1': './src/Feature1',
      },
      remotes: {
        'container': 'container@http://localhost:3000/remoteEntry.js',
      },
      shared: {
        'react': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
      },
    }),
  ],
};

            

              
                Copy
              
            
          

`app2` Webpacki Konfiguratsioon (`app2/webpack.config.js`):

`app2` konfiguratsioon oleks sarnane `app1` omale, deklareerides samuti `react`-i ja `react-dom`-i jagatuks samade versiooninõuetega.

Kuidas see käitusajal töötab:

1. Konteinerrakendus laaditakse esimesena, tehes oma jagatud `react`-i ja `react-dom`-i eksemplarid kättesaadavaks oma Module Federation'i skoobis.
2. Kui `app1` laaditakse, taotleb see `react`-i ja `react-dom`-i. `app1` Module Federation näeb, et need on märgitud jagatuks ja `singleton: true`. See kontrollib globaalsest skoobist olemasolevaid eksemplare. Kui konteiner on need juba laadinud, kasutab `app1` neid olemasolevaid eksemplare.
3. Samamoodi, kui `app2` laaditakse, kasutab ka see samu `react`-i ja `react-dom`-i eksemplare.

Selle tulemusena laaditakse brauserisse ainult üks koopia `react`-ist ja `react-dom`-ist, vähendades oluliselt kogu allalaadimismahtu.

Stsenaarium 2: Sõltuvuste Jagamine Kaugrakenduste Vahel

Module Federation võimaldab ka kaugrakendustel omavahel sõltuvusi jagada. Kui `app1` ja `app2` mõlemad kasutavad teeki, mida konteiner *ei* jaga, saavad nad seda siiski jagada, kui mõlemad deklareerivad selle oma vastavates konfiguratsioonides jagatuks.

Näide: Oletame, et `app1` ja `app2` kasutavad mõlemad abiteeki `lodash`.

`app1` Webpacki Konfiguratsioon (lisades lodash):

            
// ... ModuleFederationPlugin'i sees app1 jaoks
shared: {
  // ... react, react-dom
  'lodash': {
    singleton: true,
    requiredVersion: '^4.17.21',
  },
},

            

              
                Copy
              
            
          

`app2` Webpacki Konfiguratsioon (lisades lodash):

            
// ... ModuleFederationPlugin'i sees app2 jaoks
shared: {
  // ... react, react-dom
  'lodash': {
    singleton: true,
    requiredVersion: '^4.17.21',
  },
},

            

              
                Copy
              
            
          

Sel juhul, isegi kui konteiner ei jaga selgesõnaliselt `lodash`i, suudavad `app1` ja `app2` jagada omavahel ühte `lodash`i eksemplari, eeldusel et need laaditakse samas brauseri kontekstis.

Versioonide Mittevastavuste Käsitlemine

Üks levinumaid väljakutseid sõltuvuste jagamisel on versioonide ühilduvus. Mis juhtub, kui `app1` nõuab `react` v18.1.0 ja `app2` nõuab `react` v18.2.0? Module Federation pakub nendes stsenaariumides tugevaid strateegiaid.

1. Range Versioonivastavus (Vaikimisi käitumine `requiredVersion` puhul)

Kui määrate täpse versiooni (nt '18.1.0') või range vahemiku (nt '^18.1.0'), jõustab Module Federation selle. Kui rakendus üritab laadida jagatud sõltuvust versiooniga, mis ei vasta teise seda juba kasutava rakenduse nõudele, võib see põhjustada vigu.

2. Versioonivahemikud ja Varulahendused

Valik requiredVersion toetab semantilise versioonimise (SemVer) vahemikke. Näiteks '^18.0.0' tähendab mis tahes versiooni alates 18.0.0 kuni (kuid mitte kaasa arvatud) 19.0.0. Kui mitu rakendust nõuavad versioone selles vahemikus, kasutab Module Federation tavaliselt kõrgeimat ühilduvat versiooni, mis rahuldab kõik nõuded.

Mõelge sellele:

• Konteiner: shared: { 'react': { requiredVersion: '^18.0.0' } }
• `app1`: shared: { 'react': { requiredVersion: '^18.1.0' } }
• `app2`: shared: { 'react': { requiredVersion: '^18.2.0' } }

Kui konteiner laaditakse esimesena, kehtestab see `react` v18.0.0 (või mis iganes versiooni see tegelikult komplekteerib). Kui `app1` taotleb `react`-i versiooniga `^18.1.0`, võib see ebaõnnestuda, kui konteineri versioon on madalam kui 18.1.0. Kuid kui `app1` laaditakse esimesena ja pakub `react` v18.1.0 ning seejärel taotleb `app2` `react`-i versiooniga `^18.2.0`, üritab Module Federation rahuldada `app2` nõuet. Kui `react` v18.1.0 eksemplar on juba laaditud, võib see anda vea, sest v18.1.0 ei vasta nõudele `^18.2.0`.

Selle leevendamiseks on parim praktika määratleda jagatud sõltuvused kõige laiema aktsepteeritava versioonivahemikuga, tavaliselt konteinerrakenduses. Näiteks '^18.0.0' kasutamine võimaldab paindlikkust. Kui konkreetsel kaugrakendusel on tugev sõltuvus uuemast paigaversioonist, tuleks see konfigureerida seda versiooni selgesõnaliselt pakkuma.

3. Kasutades `shareKey` ja `shareScope`

Module Federation võimaldab teil ka kontrollida võtit, mille all moodulit jagatakse, ja skoopi, milles see asub. See võib olla kasulik edasijõudnud stsenaariumide jaoks, näiteks sama teegi erinevate versioonide jagamiseks erinevate võtmete all.

4. Valik `strictVersion`

Kui `strictVersion` on lubatud (mis on `requiredVersion` puhul vaikimisi), annab Module Federation vea, kui sõltuvust ei saa rahuldada. Seades `strictVersion: false` võib lubada leebemat versioonikäsitlust, kus Module Federation võib proovida kasutada vanemat versiooni, kui uuemat pole saadaval, kuid see võib viia käitusaja vigadeni.

Parimad Praktikad Jagatud Skoobi Kasutamisel

Et Module Federation'i jagatud skoopi tõhusalt ära kasutada ja vältida levinud lõkse, kaaluge neid parimaid praktikaid:

1. Tsentraliseerige Jagatud Sõltuvused: Määrake esmane rakendus (sageli konteiner või spetsiaalne jagatud teekide rakendus) olema tõe allikaks levinud ja stabiilsete sõltuvuste, nagu raamistikud (React, Vue, Angular), kasutajaliidese komponenditeegid ja olekuhalduse teegid, jaoks.
2. Määratlege Laiad Versioonivahemikud: Kasutage esmases jagavas rakenduses jagatud sõltuvuste jaoks SemVeri vahemikke (nt '^18.0.0'). See võimaldab teistel rakendustel kasutada ühilduvaid versioone, sundimata rangeid uuendusi kogu ökosüsteemis.
3. Dokumenteerige Jagatud Sõltuvused Selgelt: Hoidke selget dokumentatsiooni selle kohta, milliseid sõltuvusi jagatakse, nende versioone ja millised rakendused vastutavad nende jagamise eest. See aitab meeskondadel mõista sõltuvuste graafikut.
4. Jälgige Kogumite Suurusi: Analüüsige regulaarselt oma rakenduste kogumite suurusi. Module Federation'i jagatud skoop peaks viima dünaamiliselt laaditavate tükkide suuruse vähenemiseni, kuna ühised sõltuvused on välistatud.
5. Hallake Mittedeterministlikke Sõltuvusi: Olge ettevaatlik sõltuvustega, mida sageli uuendatakse või millel on ebastabiilsed API-d. Selliste sõltuvuste jagamine võib nõuda hoolikamat versioonihaldust ja testimist.
6. Kasutage `eager: true` Mõistlikult: Kuigi `eager: true` tagab sõltuvuse varajase laadimise, võib selle liigne kasutamine põhjustada suuremaid esialgseid laadimisi. Kasutage seda kriitiliste teekide jaoks, mis on rakenduse käivitamisel hädavajalikud.
7. Testimine on ülioluline: Testige põhjalikult oma mikroesirakenduste integratsiooni. Veenduge, et jagatud sõltuvused laaditakse õigesti ja et versioonikonfliktid lahendatakse sujuvalt. Automatiseeritud testimine, sealhulgas integratsiooni- ja otsast-lõpuni testid, on elutähtis.
8. Kaaluge Monorepode Kasutamist Lihtsuse Huvides: Meeskondadele, kes alustavad Module Federation'iga, võib jagatud sõltuvuste haldamine monorepos (kasutades tööriistu nagu Lerna või Yarn Workspaces) seadistust lihtsustada ja tagada järjepidevuse. Valik `packageDir` on siin eriti kasulik.
9. Käsitlege Äärmusjuhtumeid `shareKey` ja `shareScope` abil: Kui puutute kokku keerukate versioonistsenaariumidega või peate eksponeerima sama teegi erinevaid versioone, uurige `shareKey` ja `shareScope` valikuid peenema kontrolli saavutamiseks.
10. Turvalisuse Kaalutlused: Veenduge, et jagatud sõltuvused hangitakse usaldusväärsetest allikatest. Rakendage oma ehitusprotsessis ja juurutamisprotsessis turvalisuse parimaid praktikaid.

Globaalne Mõju ja Kaalutlused

Globaalsetele arendusmeeskondadele pakuvad Module Federation ja selle jagatud skoop märkimisväärseid eeliseid:

• Järjepidevus Regioonide Vahel: Tagab, et kõik kasutajad, olenemata nende geograafilisest asukohast, kogevad rakendust samade põhisõltuvustega, vähendades piirkondlikke ebajärjepidevusi.
• Kiiremad Iteratsioonitsüklid: Erinevates ajavööndites asuvad meeskonnad saavad töötada iseseisvate funktsioonide või mikroesirakenduste kallal, muretsemata pidevalt ühiste teekide dubleerimise või üksteise varvastele astumise pärast sõltuvuste versioonide osas.
• Optimeeritud Erinevatele Võrkudele: Üldise allalaadimismahu vähendamine jagatud sõltuvuste kaudu on eriti kasulik aeglasema või mõõdetud internetiühendusega kasutajatele, mis on levinud paljudes maailma osades.
• Lihtsustatud Sisseelamine: Suure projektiga liituvad uued arendajad saavad rakenduse arhitektuurist ja sõltuvuste haldusest lihtsamini aru, kui ühised teegid on selgelt määratletud ja jagatud.

Siiski peavad globaalsed meeskonnad olema teadlikud ka järgmisest:

• CDN Strateegiad: Kui jagatud sõltuvusi hoitakse CDN-is, veenduge, et CDN-il oleks hea globaalne katvus ja madal latentsusaeg kõikide sihtregioonide jaoks.
• Võrguühenduseta Tugi: Võrguühenduseta võimekust nõudvate rakenduste puhul muutub jagatud sõltuvuste ja nende vahemällu salvestamise haldamine keerulisemaks.
• Regulatiivne Vastavus: Veenduge, et teekide jagamine vastaks kõigile asjakohastele tarkvaralitsentside või andmekaitse eeskirjadele erinevates jurisdiktsioonides.

Levinumad Lõksud ja Kuidas Neid Vältida

1. Valesti Konfigureeritud singleton

Probleem: Unustatakse seada singleton: true teekidele, millel peaks olema ainult üks eksemplar.

Lahendus: Seadke alati singleton: true raamistikele, teekidele ja utiliitidele, mida kavatsete oma rakenduste vahel unikaalselt jagada.

2. Ebajärjekindlad Versiooninõuded

Probleem: Erinevad rakendused määravad sama jagatud sõltuvuse jaoks väga erinevaid, ühildumatuid versioonivahemikke.

Lahendus: Standardiseerige versiooninõuded, eriti konteinerrakenduses. Kasutage laiu SemVeri vahemikke ja dokumenteerige kõik erandid.

3. Mitteoluliste Teekide Ülejagamine

Probleem: Püütakse jagada iga väikest abiteeki, mis viib keeruka konfiguratsiooni ja võimalike konfliktideni.

Lahendus: Keskenduge suurte, levinud ja stabiilsete sõltuvuste jagamisele. Väikesi, harva kasutatavaid utiliite võib olla parem komplekteerida lokaalselt, et vältida keerukust.

4. `remoteEntry.js` Faili Vale Käsitlemine

Probleem: Fail `remoteEntry.js` ei ole kättesaadav või seda ei serveerita tarbivatele rakendustele õigesti.

Lahendus: Veenduge, et teie kaugsisendite majutusstrateegia on robustne ja et `remotes` konfiguratsioonis määratud URL-id on täpsed ja kättesaadavad.

5. `eager: true` Mõjude Ignoreerimine

Probleem: Seades eager: true liiga paljudele sõltuvustele, mis viib aeglase esialgse laadimisajani.

Lahendus: Kasutage `eager: true` ainult nende sõltuvuste jaoks, mis on teie rakenduste esialgseks renderdamiseks või põhifunktsionaalsuseks absoluutselt kriitilised.

Kokkuvõte

JavaScript Module Federation'i jagatud skoop on võimas tööriist kaasaegsete, skaleeritavate veebirakenduste ehitamiseks, eriti mikroesirakenduste arhitektuuris. Võimaldades tõhusat sõltuvuste jagamist, lahendab see koodi dubleerimise, paisumise ja ebajärjepidevuse probleeme, mis viib parema jõudluse ja hooldatavuseni. Valiku shared, eriti omaduste singleton ja requiredVersion, mõistmine ja õige konfigureerimine on nende eeliste avamise võti.

Kuna globaalsed arendusmeeskonnad võtavad üha enam kasutusele mikroesirakenduste strateegiaid, muutub Module Federation'i jagatud skoobi valdamine ülimalt oluliseks. Järgides parimaid praktikaid, hallates hoolikalt versioone ja viies läbi põhjalikku testimist, saate seda tehnoloogiat rakendada, et ehitada tugevaid, suure jõudlusega ja hooldatavaid rakendusi, mis teenindavad tõhusalt mitmekesist rahvusvahelist kasutajaskonda.

Võtke omaks jagatud skoobi vägi ja sillutage teed tõhusamale ja koostööpõhisemale veebiarendusele kogu oma organisatsioonis.