JavaScripti Module Federation: Käitusaegse Koodijagamise Võimaluste Avamine Globaalsetes Rakendustes

Tänapäeva kiiresti arenevas digitaalses maastikus on skaleeritavate, hooldatavate ja koostööpõhiste veebirakenduste loomine esmatähtis. Arendusmeeskondade kasvades ja rakenduste keerukamaks muutudes muutub vajadus tõhusa koodijagamise ja eraldamise järele üha kriitilisemaks. JavaScripti Module Federation, Webpack 5-ga kasutusele võetud murranguline funktsioon, pakub võimsat lahendust, võimaldades koodi käitusaegset jagamist iseseisvalt juurutatud rakenduste vahel. See blogipostitus süveneb Module Federation'i põhikontseptsioonidesse, keskendudes selle käitusaegse jagamise võimekusele, ja uurib, kuidas see võib revolutsiooniliselt muuta viisi, kuidas globaalsed meeskonnad oma veebirakendusi loovad ja haldavad.

Veebiarenduse Arenev Maastik ja Jagamise Vajadus

Ajalooliselt hõlmas veebiarendus sageli monoliitseid rakendusi, kus kogu kood asus ühes koodibaasis. Kuigi see lähenemine võib sobida väiksemate projektide jaoks, muutub see rakenduste skaleerimisel kiiresti kohmakaks. Sõltuvused põimuvad, ehitamisajad pikenevad ja uuenduste juurutamine võib olla keeruline ja riskantne ettevõtmine. Mikroteenuste esiletõus taustarakenduste arenduses sillutas teed sarnastele arhitektuurimustritele ka esirakendustes, mis viis mikro-esirakenduste tekkimiseni.

Mikro-esirakenduste eesmärk on jaotada suured ja keerukad esirakendused väiksemateks, iseseisvateks ja juurutatavateks üksusteks. See võimaldab erinevatel meeskondadel töötada rakenduse eri osadega autonoomselt, mis viib kiiremate arendustsükliteni ja parema meeskonna autonoomiani. Mikro-esirakenduste arhitektuuride oluliseks väljakutseks on aga alati olnud tõhus koodijagamine. Ühiste teekide, kasutajaliidese komponentide või abifunktsioonide dubleerimine mitme mikro-esirakenduse vahel põhjustab:

• Suurenenud Paketisuurused: Iga rakendus kannab endas oma koopiat jagatud sõltuvustest, paisutades kasutajate jaoks üldist allalaadimismahtu.
• Ebaühtlased Sõltuvused: Erinevad mikro-esirakendused võivad lõpuks kasutada sama teegi erinevaid versioone, mis põhjustab ühilduvusprobleeme ja ettearvamatut käitumist.
• Hoolduskoormus: Jagatud koodi värskendamine nõuab muudatusi mitmes rakenduses, suurendades vigade riski ja aeglustades juurutamist.
• Raisatud Ressursid: Sama koodi mitmekordne allalaadimine on ebaefektiivne nii kliendi kui ka serveri jaoks.

Module Federation lahendab need väljakutsed otse, pakkudes mehhanismi koodi tõeliseks jagamiseks käitusajal.

Mis on JavaScripti Module Federation?

JavaScripti Module Federation, mis on peamiselt rakendatud Webpack 5 kaudu, on ehitustööriista funktsioon, mis võimaldab JavaScripti rakendustel dünaamiliselt laadida koodi teistest rakendustest käitusajal. See võimaldab luua mitmeid iseseisvaid rakendusi, mis saavad jagada koodi ja sõltuvusi, ilma et oleks vaja monorepositooriumi või keerulist ehitusaegset integratsiooniprotsessi.

Põhiidee on defineerida "kaugrakendused" (rakendused, mis eksponeerivad mooduleid) ja "hostrakendused" (rakendused, mis tarbivad mooduleid kaugrakendustest). Neid kaug- ja hostrakendusi saab juurutada iseseisvalt, pakkudes märkimisväärset paindlikkust keerukate rakenduste haldamisel ja võimaldades mitmekesiseid arhitektuurimustreid.

Käitusaegse Jagamise Mõistmine: Module Federation'i Tuum

Käitusaegne jagamine on Module Federation'i võimsuse nurgakivi. Erinevalt traditsioonilistest koodi jaotamise või jagatud sõltuvuste haldamise tehnikatest, mis toimuvad sageli ehitusajal, võimaldab Module Federation rakendustel avastada ja laadida mooduleid teistest rakendustest otse kasutaja veebilehitsejas. See tähendab, et ühine teek, jagatud kasutajaliidese komponentide teek või isegi funktsionaalsusmoodul saab ühe rakenduse poolt korra laetud ja seejärel tehtud kättesaadavaks teistele rakendustele, mis seda vajavad.

Vaatame lähemalt, kuidas see toimib:

Põhimõisted:

• Eksponeerimised (Exposes): Rakendus saab 'eksponeerida' teatud mooduleid (nt Reacti komponent, abifunktsioon), mida teised rakendused saavad tarbida. Need eksponeeritud moodulid pakendatakse konteinerisse, mida saab kaugelt laadida.
• Kaugrakendused (Remotes): Mooduleid eksponeerivat rakendust peetakse 'kaugrakenduseks'. See eksponeerib oma moodulid jagatud konfiguratsiooni kaudu.
• Tarbimised (Consumes): Rakendust, mis peab kasutama mooduleid kaugrakendusest, nimetatakse 'tarbijaks' või 'hostiks'. See konfigureerib end teadma, kust leida kaugrakendusi ja milliseid mooduleid laadida.
• Jagatud Moodulid: Module Federation võimaldab defineerida jagatud mooduleid. Kui mitu rakendust tarbib sama jagatud moodulit, laaditakse ja jagatakse nende vahel ainult üks selle mooduli eksemplar. See on kriitiline aspekt paketisuuruste optimeerimisel ja sõltuvuskonfliktide vältimisel.

Mehhanism:

Kui hostrakendus vajab moodulit kaugrakendusest, küsib ta seda kaugrakenduse konteinerist. Kaugrakenduse konteiner laadib seejärel dünaamiliselt nõutud mooduli. Kui moodul on juba teise tarbiva rakenduse poolt laetud, jagatakse seda. See dünaamiline laadimine ja jagamine toimub sujuvalt käitusajal, pakkudes väga tõhusat viisi sõltuvuste haldamiseks.

Module Federation'i Eelised Globaalses Arenduses

Module Federation'i kasutuselevõtu eelised globaalsete rakenduste loomisel on märkimisväärsed ja kaugeleulatuvad:

1. Parem Skaleeritavus ja Hooldatavus:

Jaotades suure rakenduse väiksemateks, iseseisvateks mikro-esirakendusteks, edendab Module Federation olemuslikult skaleeritavust. Meeskonnad saavad töötada üksikute mikro-esirakendustega teisi mõjutamata, mis võimaldab paralleelset arendust ja iseseisvaid juurutusi. See vähendab massiivse koodibaasi haldamisega seotud kognitiivset koormust ja muudab rakenduse aja jooksul paremini hooldatavaks.

2. Optimeeritud Paketisuurused ja Jõudlus:

Käitusaegse jagamise kõige olulisem eelis on üldise allalaadimismahu vähendamine. Selle asemel, et iga rakendus dubleeriks ühiseid teeke (nagu React, Lodash või kohandatud kasutajaliidese komponentide teek), laaditakse need sõltuvused üks kord ja jagatakse. See viib:

• Kiiremad Alglaadimisajad: Kasutajad laadivad alla vähem koodi, mis tulemuseks on rakenduse kiirem esmane renderdamine.
• Parem Järgnev Navigeerimine: Sõltuvusi jagavate mikro-esirakenduste vahel navigeerides taaskasutatakse juba laetud mooduleid, mis tagab kiirema kasutajakogemuse.
• Vähendatud Serverikoormus: Serverist edastatakse vähem andmeid, mis võib potentsiaalselt vähendada majutuskulusid.

Kujutage ette globaalset e-kaubanduse platvormi, millel on eraldi jaotised tootenimekirjade, kasutajakontode ja kassa jaoks. Kui iga jaotis on eraldi mikro-esirakendus, kuid nad kõik tuginevad nuppude, vormide ja navigeerimise jaoks ühisele kasutajaliidese komponentide teegile, tagab Module Federation, et see teek laaditakse ainult üks kord, olenemata sellest, millist jaotist kasutaja esimesena külastab.

3. Suurenenud Meeskonna Autonoomia ja Koostöö:

Module Federation annab erinevatele meeskondadele, mis võivad asuda erinevates globaalsetes piirkondades, võimaluse töötada iseseisvalt oma vastavate mikro-esirakendustega. Nad saavad valida oma tehnoloogiapinu (mõistlikes piirides, et säilitada teatud järjepidevus) ja juurutusgraafikud. See autonoomia soodustab kiiremat innovatsiooni ja vähendab suhtluskoormust. Samas julgustab ühise koodi jagamise võimalus ka koostööd, kuna meeskonnad saavad panustada jagatud teekidesse ja komponentidesse ning neist kasu saada.

Kujutage ette globaalset finantsasutust, kus eraldi meeskonnad Euroopas, Aasias ja Põhja-Ameerikas vastutavad erinevate tootepakkumiste eest. Module Federation võimaldab igal meeskonnal arendada oma spetsiifilisi funktsioone, kasutades samal ajal ühist autentimisteenust või keskse meeskonna arendatud jagatud diagrammiteeki. See edendab taaskasutatavust ja tagab järjepidevuse erinevate tootesarjade vahel.

4. Tehnoloogia Agnostilisus (mööndustega):

Kuigi Module Federation on ehitatud Webpackile, võimaldab see teatud määral tehnoloogilist agnostilisust erinevate mikro-esirakenduste vahel. Üks mikro-esirakendus võib olla ehitatud Reactiga, teine Vue.js-iga ja kolmas Angulariga, eeldusel, et nad lepivad kokku, kuidas mooduleid eksponeerida ja tarbida. Kuid keerukate raamistike, nagu React või Vue, tõeliseks käitusaegseks jagamiseks tuleb erilist tähelepanu pöörata sellele, kuidas neid raamistikke initsialiseeritakse ja jagatakse, et vältida mitme eksemplari laadimist ja konfliktide tekitamist.

Globaalsel SaaS-ettevõttel võib olla ühes raamistikus arendatud põhiplatvorm ja seejärel eraldada spetsialiseeritud funktsionaalsusmooduleid, mida arendavad erinevad piirkondlikud meeskonnad teiste raamistike abil. Module Federation võib hõlbustada nende erinevate osade integreerimist, eeldusel, et jagatud sõltuvusi hallatakse hoolikalt.

5. Lihtsam Versioonihaldus:

Kui jagatud sõltuvust on vaja uuendada, tuleb värskendada ja uuesti juurutada ainult seda eksponeeriv kaugrakendus. Kõik tarbivad rakendused võtavad uue versiooni automaatselt kasutusele järgmisel laadimisel. See lihtsustab jagatud koodi haldamise ja värskendamise protsessi kogu rakenduste maastikul.

Module Federation'i Rakendamine: Praktilised Näited ja Strateegiad

Vaatame, kuidas Module Federation'i praktikas seadistada ja kasutada. Kasutame lihtsustatud Webpacki konfiguratsioone põhikontseptsioonide illustreerimiseks.

Stsenaarium: Kasutajaliidese Komponentide Teegi Jagamine

Oletame, et meil on kaks rakendust: 'Tootekataloog' (kaugrakendus) ja 'Kasutaja Töölaud' (hostrakendus). Mõlemad peavad kasutama jagatud 'Nupu' komponenti spetsiaalsest 'Jagatud KLI' teegist.

1. 'Jagatud KLI' Teek (Kaugrakendus):

See rakendus eksponeerib oma 'Nupu' komponendi.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3001/dist/', // URL, kus kaugrakendust serveeritakse
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'sharedUI',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.js', // Eksponeeri Nupu komponent
      },
      shared: {
        // Defineeri jagatud sõltuvused
        react: {
          singleton: true, // Veendu, et laaditakse ainult üks Reacti eksemplar
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... muud webpacki konfiguratsioonid (babel, devServer jne)
};

            

              
                Copy
              
            
          

src/components/Button.js:

            
import React from 'react';

const Button = ({ onClick, children }) => (
  
    {children}
  
);

export default Button;

            

              
                Copy
              
            
          

Selles seadistuses eksponeerib 'Shared UI' oma Button komponendi ja deklareerib react ja react-dom jagatud sõltuvustena koos parameetriga singleton: true, et tagada nende käsitlemine ühe eksemplarina kõigis tarbivates rakendustes.

2. 'Tootekataloogi' Rakendus (Kaugrakendus):

See rakendus peab samuti tarbima jagatud Button komponenti ja jagama omaenda sõltuvusi.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3002/dist/', // URL, kus seda kaugrakendust serveeritakse
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList.js', // Eksponeeri ProductList
      },
      remotes: {
        // Defineeri kaugrakendus, millest see peab tarbima
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
      },
      shared: {
        // Jagatud sõltuvused sama versiooniga ja singleton: true
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... muud webpacki konfiguratsioonid
};

            

              
                Copy
              
            
          

'Tootekataloog' eksponeerib nüüd oma ProductList komponendi ja deklareerib oma kaugrakendused, viidates konkreetselt 'Shared UI' rakendusele. See deklareerib ka samad jagatud sõltuvused.

3. 'Kasutaja Töölaua' Rakendus (Hostrakendus):

See rakendus tarbib Button komponenti 'Shared UI'-st ja ProductList komponenti 'Tootekataloogist'.

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3000/dist/', // URL, kus selle rakenduse pakette serveeritakse
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'userDashboard',
      remotes: {
        // Defineeri kaugrakendused, mida see hostrakendus vajab
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
        productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
      },
      shared: {
        // Jagatud sõltuvused, mis peavad vastama kaugrakendustele
        react: {
          singleton: true,
          import: 'react', // Määra impordi jaoks mooduli nimi
        },
        'react-dom': {
          singleton: true,
          import: 'react-dom',
        },
      },
    }),
  ],
  // ... muud webpacki konfiguratsioonid
};

            

              
                Copy
              
            
          

src/index.js 'Kasutaja Töölaua' jaoks:

            
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

// Impordi dünaamiliselt jagatud Nupu komponent
const RemoteButton = React.lazy(() => import('sharedUI/Button'));

// Impordi dünaamiliselt ProductList komponent
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));

const App = () => {
  const handleClick = () => {
    alert('Nupule vajutati jagatud KLI-st!');
  };

  return (
    

      
Kasutaja Töölaud
      Laen nuppu...
}>
        Vajuta Siia
      

      
Tooted
      Laen tooteid...