Ressurshintet modulepreload
Forhåndslast ES-moduler for raskere oppstart av JavaScript
Ressurshintet modulepreload er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hvorfor modulepreload finnes
ES-moduler danner en avhengighetsgraf: En inngangsmodul importerer andre moduler, som igjen importerer flere. Uten hjelp oppdages hvert nivå i treet først etter at det forrige nivået er analysert. Resultatet blir en sekvensiell fossefallsinnlasting som ødelegger lasteytelsen.
Hva modulepreload gjør
<link rel="modulepreload" href="/app.js"> forteller nettleseren at den skal hente modulen og alle modulene den importerer, også transitivt, umiddelbart og parallelt. Når <script type="module"> kjører, ligger hele grafen allerede i hurtigbufferet.
Sammenlignet med preload
preload henter også filer parallelt, men kjenner ikke til import-setninger. Hvis du forhåndslaster en modulfil, blir ikke avhengighetene forhåndslastet. modulepreload følger importene automatisk, og det er nettopp hensikten.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Hvor det skal plasseres
I <head>, så tidlig som mulig. Nettleseren starter preload-forespørselen umiddelbart og fortsetter å analysere HTML. Når den tilsvarende <script type="module">-taggen nås senere i dokumentet, ligger filen allerede i minnet.
Oppdagelse og gjennomgang av grafen
Nettleseren analyserer den forhåndslastede modulen for å finne import-setninger og sender deretter parallelle forespørsler for hver importerte URL, rekursivt. Brukeren betaler kostnaden for én tur-retur per nivå, men får parallellitet innenfor hvert nivå, noe som forkorter den kritiske banen betydelig.
Bruk sammen med bundlere
Moderne bundlere (Vite, Rollup, Webpack 5+) genererer automatisk modulepreload-tagger for kodeoppdelte biter. I egenutviklede applikasjoner bør du generere dem fra importgrafen ved byggetid, slik at listen forblir korrekt når moduler legges til eller fjernes.
Hensyn ved bruk av CrossOrigin
For modulepreload på tvers av opprinnelser må du ta med crossorigin="anonymous". Dette samsvarer med standardmodusen for henting fra <script type="module"> og sikrer at den forhåndslastede kopien brukes på nytt, i stedet for å hentes på nytt uten CORS-headere.
Nettleserstøtte
modulepreload støttes i Chrome/Edge/Safari og nyere Firefox. I eldre Firefox ignoreres det stille – modulene fungerer fortsatt, bare uten fordelen av forhåndslasting. Det er ikke nødvendig med en polyfill; i verste fall blir innlastingen litt tregere i utdaterte nettlesere.
Begrens grafens størrelse
Forhåndslasting av hundrevis av moduler sløser med båndbredde på kode brukeren kanskje aldri kjører. Forhåndslast bare inngangsbiter på rutenivå, ikke biter som lastes inn sent og trinnvis. Stol på prefetch (eller importer ved behov) for kodebaner som brukes sjelden.
Kombiner med andre hint
For bilder og skrifter i det samme head-elementet kan du kombinere fritt: preconnect for CDN-er fra tredjeparter, preload for kritiske skrifter, modulepreload for inngangsmoduler og prefetch for ressurser til neste side. Hintene forstyrrer ikke hverandre.
Bekreftelse
Kontroller Nettverk-panelet: Med modulepreload vises importene på andre nivå som parallelle forespørsler som starter nesten samtidig med inngangsmodulen. Uten modulepreload vises de forskjøvet, og hver forespørsel starter først etter at overordnet modul er ferdig analysert.
Kunnskapssjekk
Hva gjør modulepreload som en vanlig preload av den samme modulfila ikke gjør?
Sammendrag
modulepreload eliminerer fossefallsinnlastingen for ES-moduler ved å hente inngangsmodulen og importene parallelt før kjøringen. Plasser det tidlig i <head>, generer det fra byggegrafen, angi crossorigin for moduler på tvers av opprinnelser, og begrens omfanget til inngangspunkter på rutenivå for å unngå sløsing med båndbredde.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Ressurshintet modulepreload» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Ressurshintet modulepreload», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Ressurshintet modulepreload»?
Forhåndslast ES-moduler for raskere oppstart av JavaScript Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Ressurshintet modulepreload»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- async- og defer-attributtene
- Preload, Prefetch og Preconnect
- Lazy loading av bilder med loading=lazy
- Ressurshintet modulepreload