Micro frontendien esilataus ja ennakkolataus
Opettele ennakoimaan käyttäjän navigointia ja hakemaan micro frontendien paketit etukäteen, jotta siirtymät tuntuvat välittömiltä.
Micro frontendien esilataus ja ennakkolataus on ilmainen Micro Frontends -arkkitehtuuri Module Federationilla-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Micro Frontends -arkkitehtuuri Module Federationilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Micro Frontends -arkkitehtuuri Module Federationilla-kurssilla on yhteensä 4 oppituntia.
Lazysta lähes eager-lataukseen
Lazy loading säästää alkulatauksessa, mutta aiheuttaa odotuksen, kun käyttäjä avaa MFE:n ensimmäisen kerran. Prefetching pienentää tätä viivettä hakemalla todennäköisesti tarvittavat bundlet etukäteen.
Prefetch ja preload
Selain tarjoaa kaksi vihjettä:
- preload: haetaan heti, suurella prioriteetilla, tarvitaan pian
- prefetch: haetaan joutoaikana, pienellä prioriteetilla, saatetaan tarvita myöhemmin
Resurssivihjeiden tagit
Voitte vihjata selainta suoraan link-tageilla, jolloin se hakee MFE:n bundlen joutoaikana.
<link rel="prefetch" href="/products/remoteEntry.js">
<link rel="preload" href="/cart/remoteEntry.js" as="script">Prefetching käyttäjän aikomuksen perusteella
Tehokas keino on aloittaa MFE:n hakeminen, kun käyttäjä vie hiiren linkin päälle, hyvissä ajoin ennen napsautusta. Bundle on usein valmis, kun napsautus tapahtuu.
link.addEventListener("mouseenter", () => {
import("products/App");
});Ohjelmallinen prefetch import()-kutsulla
Koska Module Federation käyttää dynaamista import()-kutsua, sen kutsuminen aikaisin (ilman tuloksen käyttämistä) lämmittää välimuistin myöhempää käyttöä varten.
function prefetchProducts() {
import("products/App"); // result ignored
}Prefetch ensimmäisen piirtokerran jälkeen
Hakekaa todennäköisimmin seuraavaksi tarvittava MFE heti, kun alkusivu on interaktiivinen. Käyttäkää joutoaikaa, jotta haku ei koskaan kilpaile kriittisen sisällön kanssa.
requestIdleCallback(() => {
import("cart/App");
});Prefetchin kohteen ennustaminen
Hyödyntäkää analytiikkaa yleisten navigointipolkujen selvittämiseen. Jos useimmat käyttäjät siirtyvät etusivulta tuotteisiin, hakekaa products-MFE heti etusivun latauduttua.
Liiallisen prefetchin välttäminen
Kaiken hakeminen etukäteen kuluttaa kaistanleveyttä ja akkua, erityisesti mobiililaitteissa. Hakekaa etukäteen vain todennäköisimmät kohteet ja kunnioittakaa tiedonsäästöasetuksia.
if (!navigator.connection?.saveData) {
import("products/App");
}Jaettujen riippuvuuksien preload
Tulevien MFE:iden käyttämien jaettujen kirjastojen, kuten Reactin, preload tasoittaa siirtymiä entisestään, koska jaettu chunk on jo välimuistissa MFE:n liittämisen hetkellä.
Vaikutusten mittaaminen
Seuratkaa aikaa navigointiaikomuksesta MFE:n renderöitymiseen. Tehokkaan prefetchin pitäisi pienentää tätä mittaria selvästi oikeiden käyttäjien seurannassa.
Tasapainoinen strategia
Yhdistäkää tekniikoita: ladatkaa seuraava MFE preload-menetelmällä hiiren osoittaessa linkkiä, hakekaa yksi todennäköisin reitti etukäteen joutoaikana ja ohittakaa prefetch rajoitetuissa verkoissa.
Pikatarkistus
Testatkaa prefetching-toimintoa koskevat tietonne.
Kertaus
Opitte hakemaan micro frontendit etukäteen:
- Prefetch täyttää odotusajan, jonka lazy loading aiheuttaa
- Käyttäkää preloadia (tarvitaan pian) ja prefetchia (saatetaan tarvita myöhemmin)
- Hakekaa sisältö hiiren osoituksen tai käyttäjän aikomuksen perusteella sekä joutoaikana
- Ennustakaa reittejä analytiikan avulla
- Välttäkää liiallista prefetchia hitaissa verkoissa
Älykäs prefetch tekee MFE-navigoinnista välittömän tuntuista.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 12
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”Micro frontendien esilataus ja ennakkolataus” ilmainen?
Kyllä – oppitunnin ”Micro frontendien esilataus ja ennakkolataus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Micro Frontends -arkkitehtuuri Module Federationilla-kurssin, päivitä CoddyKit PROhon. Micro Frontends -arkkitehtuuri Module Federationilla-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Micro frontendien esilataus ja ennakkolataus”?
Opettele ennakoimaan käyttäjän navigointia ja hakemaan micro frontendien paketit etukäteen, jotta siirtymät tuntuvat välittömiltä. Harjoittelet Micro Frontends -arkkitehtuuri Module Federationilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Micro Frontends -arkkitehtuuri Module Federationilla-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Micro Frontends -arkkitehtuuri Module Federationilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Micro frontendien esilataus ja ennakkolataus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Micro Frontends -arkkitehtuuri Module Federationilla-oppitunnilla?
Kyllä. Jokainen Micro Frontends -arkkitehtuuri Module Federationilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Micro Frontendien lazy loading
- Bundlen koon pienentämistekniikat
- Välimuististrategiat
- Micro frontendien esilataus ja ennakkolataus