Resurstips med modulepreload
Förläs in ES-moduler så att JavaScript startar snabbare
Resurstips med modulepreload är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Varför modulepreload finns
ES-moduler bildar en beroendegraf: en startmodul importerar andra, som i sin tur importerar fler. Utan hjälp upptäcks varje nivå i trädet först när den föregående nivån har parsats, vilket skapar ett sekventiellt vattenfall som kraftigt försämrar laddningsprestandan.
Vad modulepreload gör
<link rel="modulepreload" href="/app.js"> anger för webbläsaren att omedelbart hämta modulen OCH alla moduler som importeras transitivt, parallellt. När <script type="module"> körs finns hela grafen redan i cachen.
Jämförelse med preload
preload hämtar också filer parallellt, men känner inte till import-satser – om du förladdar en modulfil förladdas inte dess beroenden. modulepreload följer automatiskt importerna, vilket är hela poängen.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Var det ska placeras
I <head>, så tidigt som möjligt. Webbläsaren startar preload-förfrågan omedelbart och fortsätter att parsa HTML. När motsvarande <script type="module"> påträffas senare i dokumentet finns filen redan i minnet.
Upptäckt och genomgång av grafen
Webbläsaren parsar den förladdade modulen för att hitta import-satser och hämtar sedan varje importerad URL parallellt, rekursivt. Användaren betalar kostnaden för en tur och retur per nivå, men får parallellism inom varje nivå, vilket förkortar den kritiska vägen drastiskt.
Använd med bundlers
Moderna bundlers (Vite, Rollup, Webpack 5+) genererar automatiskt modulepreload-taggar för koddelade delar. I handbyggda applikationer bör du generera dem från importgrafen vid byggtillfället, så att listan förblir korrekt när moduler läggs till eller tas bort.
Överväganden för cross-origin
För modulepreload från en annan källa ska du inkludera crossorigin="anonymous". Det överensstämmer med standardläget för hämtning från <script type="module"> och säkerställer att den förladdade kopian återanvänds i stället för att hämtas igen utan CORS-rubriker.
Webbläsarstöd
modulepreload stöds i Chrome/Edge/Safari och nyare versioner av Firefox. I äldre Firefox ignoreras det tyst – modulerna fungerar fortfarande, men utan fördelen av förladdningen. Ingen polyfill behövs; i värsta fall går laddningen något långsammare i föråldrade webbläsare.
Begränsa grafens storlek
Att förladda hundratals moduler slösar bandbredd på kod som användaren kanske aldrig kör. Förladda endast startdelarna för respektive rutt, inte sådant som laddas in lazy på djupet. Använd prefetch (eller import on demand) för kodvägar som används sällan.
Kombinera med andra resurshints
För bilder och teckensnitt i samma head kan du blanda fritt: preconnect för CDN:er från tredje part, preload för kritiska teckensnitt, modulepreload för startmoduler och prefetch för resurser till nästa sida. Hints påverkar inte varandra.
Verifiering
Kontrollera nätverkspanelen: med modulepreload visas importerna på andra nivån som parallella förfrågningar som startar nästan samtidigt som startmodulen. Utan det visas de förskjutna, där varje förfrågan startar först när den överordnade modulen har parsats klart.
Kunskapskontroll
Vad gör modulepreload som en vanlig preload av samma modulfil inte gör?
Sammanfattning
modulepreload eliminerar ES-modulernas vattenfall genom att hämta startmodulen och dess importer parallellt före körningen. Placera det tidigt i <head>, generera det från bygggrafen, ange crossorigin för moduler från andra källor och begränsa omfattningen till rutternas startpunkter för att undvika slösad bandbredd.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Resurstips med modulepreload” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Resurstips med modulepreload”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Resurstips med modulepreload”?
Förläs in ES-moduler så att JavaScript startar snabbare Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Resurstips med modulepreload”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Attributen async och defer
- Preload, prefetch och preconnect
- Lazy loading av bilder med loading=lazy
- Resurstips med modulepreload