Resurssivihjeet: modulepreload
Esilataa ES-moduulit JavaScriptin nopeampaa käynnistymistä varten
Resurssivihjeet: modulepreload on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Miksi modulepreload on olemassa
ES-moduulit muodostavat riippuvuusgraafin: aloitusmoduuli tuo muita moduuleja, jotka puolestaan tuovat lisää moduuleja. Ilman apua puun jokainen taso löydetään vasta edellisen tason jäsentämisen jälkeen, mikä tuottaa peräkkäisen waterfall-latauksen ja heikentää lataussuorituskykyä merkittävästi.
Mitä modulepreload tekee
<link rel="modulepreload" href="/app.js"> käskee selainta hakemaan moduulin JA sen transitiivisesti tuodut moduulit välittömästi rinnakkain. Kun <script type="module"> suoritetaan, koko graafi on jo välimuistissa.
preloadiin verrattuna
preload hakee myös tiedostoja rinnakkain, mutta se ei tunne import-määrityksiä — moduulitiedoston esilataaminen ei esilataa sen riippuvuuksia. modulepreload seuraa tuonteja automaattisesti, mikä on koko ominaisuuden tarkoitus.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Sijoita se head-osioon
Sijoittakaa se <head>-osioon mahdollisimman aikaisin. Selain käynnistää esilatauspyynnön heti ja jatkaa HTML:n jäsentämistä. Kun vastaava <script type="module"> kohdataan myöhemmin dokumentissa, tiedosto on jo muistissa.
Löytäminen ja graafin läpikäynti
Selain jäsentää esiladatun moduulin ja etsii import-määrityksiä, minkä jälkeen se hakee jokaisen tuodun URL-osoitteen rinnakkain ja rekursiivisesti. Käyttäjä maksaa yhden edestakaisen verkkokierroksen kustannuksen tasoa kohti, mutta saa rinnakkaisuuden jokaisen tason sisällä, mikä lyhentää kriittistä polkua huomattavasti.
Käytä bundlereiden kanssa
Nykyaikaiset bundlerit (Vite, Rollup, Webpack 5+) tuottavat modulepreload-tageja automaattisesti koodijakoon käytettäville paloille. Itse rakennetuissa sovelluksissa muodostakaa ne koontivaiheessa import-graafin perusteella, jotta luettelo pysyy ajan tasalla moduuleja lisättäessä tai poistettaessa.
CrossOrigin-huomioitavaa
Eri alkuperää olevien moduulien esilatausta varten lisätkää crossorigin="anonymous". Tämä vastaa <script type="module">-elementin oletusarvoista hakutilaa ja varmistaa, että esiladattu kopio käytetään uudelleen sen sijaan, että se haettaisiin uudelleen ilman CORS-otsakkeita.
Selain tuki
modulepreload on tuettu Chromessa, Edgessä, Safarissa ja uudemmissa Firefox-versioissa. Vanhemmassa Firefoxissa se ohitetaan hiljaisesti — moduulit toimivat edelleen, mutta ilman esilatauksen hyötyä. Polyfill-toteutusta ei tarvita; vanhentuneilla selaimilla lataus on pahimmillaan hieman hitaampaa.
Rajoita graafin kokoa
Satojen moduulien esilataaminen tuhlaa kaistanleveyttä koodiin, jota käyttäjä ei ehkä koskaan suorita. Esiladatkaa vain reittitason aloituspalat, älkää syvällä olevia lazy loadingilla ladattavia paloja. Luottakaa harvoin käytettävien koodipolkujen osalta prefetch-määritykseen tai tarvittaessa tehtävään importiin.
Yhdistä muihin vihjeisiin
Saman head-osiossa olevien kuvien ja fonttien tapauksessa voitte yhdistellä määrityksiä vapaasti: käyttäkää preconnect-määritystä kolmannen osapuolen CDN-palveluille, preload-määritystä tärkeille fonteille, modulepreload-määritystä aloitusmoduuleille ja prefetch-määritystä seuraavan sivun resursseille. Vihjeet eivät häiritse toistensa toimintaa.
Varmistaminen
Tarkistakaa verkkopaneeli: modulepreload-määrityksen kanssa toisen tason importit näkyvät rinnakkaisina pyyntöinä, jotka alkavat lähes samanaikaisesti aloitusmoduulin kanssa. Ilman sitä ne näkyvät porrastettuina, ja jokainen pyyntö alkaa vasta, kun sen ylätason moduuli on jäsennetty.
Tietotesti
Mitä modulepreload tekee, mitä saman moduulitiedoston tavallinen preload ei tee?
Yhteenveto
modulepreload poistaa ES-moduulien waterfall-latauksen hakemalla aloitusmoduulin ja sen importit rinnakkain ennen suorittamista. Sijoittakaa se aikaisin <head>-osioon, muodostakaa se koontigraafin perusteella, asettakaa crossorigin eri alkuperää oleville moduuleille ja rajoittakaa laajuus reittien aloituspisteisiin kaistanleveyden tuhlaamisen välttämiseksi.
Opi HTML 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Resurssivihjeet: modulepreload” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Resurssivihjeet: modulepreload”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Resurssivihjeet: modulepreload”?
Esilataa ES-moduulit JavaScriptin nopeampaa käynnistymistä varten Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Resurssivihjeet: modulepreload”-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ä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-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
- async- ja defer-attribuutit
- Preload, Prefetch ja Preconnect
- Kuvien laiska lataus: loading=lazy
- Resurssivihjeet: modulepreload