Välimuististrategiat

Välimuisti on kuin paikallinen kopio kirjasta, jota luet usein. Sen sijaan että hakisit kirjan kirjastosta joka kerta, otat sen omasta hyllystäsi!

Micro Frontend -sovelluksille (MFE) välimuisti on välttämätön. Se tarkoittaa, että selain tallentaa MFE-sovellusten osia, kuten JavaScript-paketteja ja CSS-tiedostoja, paikallisesti. Tämä vähentää verkkopyyntöjä huomattavasti ja nopeuttaa myöhempiä sivulatauksia, jolloin sovellus tuntuu paljon nopeammalta ja responsiivisemmalta.

Yleisin hyödyntämäsi välimuistityyppi on selaimen välimuisti. Kun käyt verkkosivustolla, selain tallentaa staattiset resurssit, joten niitä ei tarvitse ladata uudelleen, jos palaat sivustolle tai siirryt sovelluksessa toiseen näkymään.

• Staattiset resurssit: JavaScript, CSS, kuvat ja fontit.
• Lyhyemmät latausajat: Seuraavat käynnit ovat nopeampia.
• Pienempi kaistan kulutus: Dataa säästyy sekä käyttäjältä että palvelimelta.

Verkkopalvelimet käyttävät HTTP-otsakkeita kertoakseen selaimille, miten resursseja tulee tallentaa välimuistiin. Tärkein niistä on Cache-Control.

Se määrittää esimerkiksi, kuinka kauan resurssi voidaan säilyttää (max-age), onko se julkinen vai yksityinen ja onko se tarkistettava uudelleen.

MFE-resursseissa näet usein määrityksen: Cache-Control: public, max-age=31536000. Se kertoo selaimelle, että tiedosto tallennetaan välimuistiin vuodeksi.

Mitä tapahtuu, kun päivität MFE-koodisi? Jos selaimella on vanha versio välimuistissa, käyttäjät eivät näe uusia ominaisuuksia!

Tässä kohtaa cache busting tulee avuksi. Luomme MFE-paketeille sisällön perusteella yksilölliset tiedostonimet. Jos sisältö muuttuu, myös tiedostonimi muuttuu.

• Vanha tiedosto: main.js
• Uusi tiedosto: main.1a2b3c4d.js

Uusi tiedostonimi pakottaa selaimen lataamaan tuoreen version.

Webpackin kaltaiset koontityökalut tekevät cache busting -tekniikan käytöstä helppoa. Ne luovat automaattisesti yksilölliset hash-arvot tulostiedostojen nimille.

Seuraavassa on yleinen Webpack-asetusten katkelma:

// webpack.config.js snippet\noutput: {\n  filename: '[name].[contenthash].js',\n  publicPath: 'auto',\n}

[contenthash]-paikanvaraaja varmistaa, että hash muuttuu vain, kun tiedoston sisältö muuttuu. Näin välimuistia voidaan hyödyntää pitkään.

Content Delivery Network (CDN) vie välimuistin käytön seuraavalle tasolle. CDN:t ovat maailmanlaajuisesti hajautettuja palvelinverkkoja.

Kun käyttäjä pyytää MFE-resurssia, CDN toimittaa sen maantieteellisesti lähimmältä palvelimelta. Tämä vähentää viivettä huomattavasti ja nopeuttaa latausaikoja erityisesti maailmanlaajuisessa käyttäjäkunnassa.

• Pienempi viive: Data kulkee lyhyemmän matkan.
• Hyvä saatavuus: Sisältö on kopioitu useille palvelimille.
• Skaalautuvuus: Käsittelee suuria liikennemääriä tehokkaasti.

Hashattujen MFE-resurssien kanssa voit käyttää immutable-direktiiviä yhdessä Cache-Control-määrityksen kanssa. Se kertoo selaimelle, että tiedosto ei koskaan muutu välimuistiin tallentamisen jälkeen.

Cache-Control: public, max-age=31536000, immutable

Tällöin selain voi ohittaa uudelleentarkistukset, mikä mahdollistaa mahdollisimman nopeat myöhemmät lataukset. Tämä toimii täydellisesti sisällön hashauksen kanssa, koska sisällön muuttuminen tarkoittaa uuden tiedostonimen syntymistä.

Joskus käyttäjät on pakotettava päivittämään uusimpaan versioon heti, vaikka välimuisti ilmoittaisi sen olevan edelleen voimassa. Tätä kutsutaan välimuistin mitätöinniksi.

Sisällön hajautusarvoja käytettäessä useimmat mitätöinnit hoituvat yksinkertaisesti ottamalla käyttöön uudet bundlet uusilla hajautusarvoilla. CDN-palveluissa voit usein "tyhjentää" tiettyjen tiedostojen tai koko sovelluksen välimuistin, jolloin CDN joutuu hakemaan tuoreen sisällön origin-palvelimelta.

Module Federation mahdollistaa yhteisten kirjastojen, kuten Reactin tai Lodashin, jakamisen MFE-sovellusten kesken. Myös nämä jaetut riippuvuudet hyötyvät välimuistiin tallentamisesta.

Kun jaetut moduulit määritetään Webpackissa, ne voidaan bundlata erikseen ja tallentaa välimuistiin itsenäisesti. Jos kaksi MFE-sovellusta käyttää jaetun kirjaston samaa versiota, käyttäjä lataa sen vain kerran.

Hienoa työtä! Olet oppinut, kuinka tärkeä välimuisti on Micro Frontendien suorituskyvylle. Käyttämällä selaimen välimuistia HTTP-otsakkeiden avulla, sisällön hajautusarvoja välimuistin ohittamiseen ja CDN-palveluja maailmanlaajuiseen jakeluun voit nopeuttaa sovelluksiasi merkittävästi.

Näiden strategioiden ansiosta käyttäjät saavat aina uusimman koodin nopeasti ja tehokkaasti. Jatka federated-sovellustesi optimointiin tutustumista!