Ressourcehintet modulepreload
Indlæs ES-moduler på forhånd for hurtigere JavaScript-opstart
Ressourcehintet modulepreload er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvorfor modulepreload findes
ES-moduler danner en afhængighedsgraf: Et indgangsmodul importerer andre moduler, som importerer flere. Uden hjælp opdages hvert niveau i træet først, når det foregående niveau er blevet fortolket — det skaber et sekventielt vandfald, der ødelægger indlæsningens ydeevne.
Hvad modulepreload gør
<link rel="modulepreload" href="/app.js"> fortæller browseren, at den straks skal hente modulet OG alle moduler, som det importerer transitivt, parallelt. Når <script type="module"> køres, ligger hele grafen allerede i cachen.
Sammenlignet med preload
preload henter også filer parallelt, men kender ikke til import-sætninger — hvis du forhåndsindlæser en modulf il, bliver dens afhængigheder ikke forhåndsindlæst. modulepreload følger automatisk importer, og det er netop hele formålet.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Hvor det skal placeres
I <head>, så tidligt som muligt. Browseren starter forhåndsindlæsningen med det samme og fortsætter med at fortolke HTML. Når det tilsvarende <script type="module"> senere mødes i dokumentet, ligger filen allerede i hukommelsen.
Opdagelse og gennemgang af grafen
Browseren fortolker det forhåndsindlæste modul for at finde import-sætninger og starter derefter hentninger af hver importeret URL parallelt og rekursivt. Brugeren betaler prisen for én rundtur pr. niveau, men får parallelitet inden for hvert niveau, hvilket forkorter den kritiske sti markant.
Brug sammen med bundlere
Moderne bundlere (Vite, Rollup, Webpack 5+) genererer automatisk modulepreload-tags til chunks, der er opdelt efter kode. I håndbyggede apps skal du generere dem ud fra importgrafen ved byggetid, så listen forbliver korrekt, når moduler tilføjes eller fjernes.
Overvejelser om cross-origin
For modulepreloads på tværs af oprindelser skal du inkludere crossorigin="anonymous". Det matcher standard-hentetilstanden for <script type="module"> og sikrer, at den forhåndsindlæste kopi genbruges i stedet for at blive hentet igen uden CORS-headere.
Browserunderstøttelse
modulepreload understøttes i Chrome/Edge/Safari og nyere versioner af Firefox. I ældre versioner af Firefox ignoreres det stiltiende — moduler virker stadig, bare uden fordelen ved forhåndsindlæsningen. Der er ikke brug for en polyfill; i værste fald indlæses siderne lidt langsommere i forældede browsere.
Begræns grafens størrelse
Forhåndsindlæsning af hundredvis af moduler spilder båndbredde på kode, som brugeren måske aldrig kører. Forhåndsindlæs kun indgangschunks på ruteniveau, ikke dem, der indlæses dovent på dybere niveauer. Stol på prefetch (eller importér efter behov) for kodeveje, der bruges sjældent.
Kombination med andre ressourcehint
For billeder og skrifttyper i samme head kan du frit kombinere: preconnect til tredjeparts-CDN'er, preload til kritiske skrifttyper, modulepreload til indgangsmoduler og prefetch til aktiver til næste side. Ressourcehintene forstyrrer ikke hinanden.
Verifikation
Se i netværkspanelet: Med modulepreload vises importer på andet niveau som parallelle anmodninger, der starter næsten samtidigt med indgangsmodulet. Uden det vises de forskudt, hvor hver anmodning først starter, efter at det overordnede modul er færdigfortolket.
Videnstjek
Hvad gør modulepreload, som en almindelig preload af den samme modulf il ikke gør?
Opsummering
modulepreload fjerner ES-modulernes vandfald ved at hente indgangsmodulet og dets importer parallelt før kørsel. Placér det tidligt i <head>, generér det ud fra byggegrafen, angiv crossorigin for moduler på tværs af oprindelser, og begræns omfanget til indgangspunkter for ruter for at undgå spildt båndbredde.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Ressourcehintet modulepreload” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Ressourcehintet modulepreload”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Ressourcehintet modulepreload”?
Indlæs ES-moduler på forhånd for hurtigere JavaScript-opstart Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Ressourcehintet modulepreload”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Attributterne async og defer
- Preload, prefetch og preconnect
- Lazy loading af billeder: loading=lazy
- Ressourcehintet modulepreload