Resource hints: modulepreload
Precaricare i moduli ES per avviare più rapidamente JavaScript
Resource hints: modulepreload è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Perché esiste modulepreload
I moduli ES formano un grafo delle dipendenze: un modulo di ingresso ne importa altri, che a loro volta ne importano altri ancora. Senza un intervento specifico, ogni livello dell'albero viene individuato solo dopo l'analisi del livello precedente, creando una cascata sequenziale che compromette le prestazioni di caricamento.
Che cosa fa modulepreload
<link rel="modulepreload" href="/app.js"> indica al browser di recuperare immediatamente il modulo e tutti i moduli importati transitivamente, in parallelo. Quando viene eseguito <script type="module">, l'intero grafo è già nella cache.
Confronto con preload
preload recupera anch'esso i file in parallelo, ma non riconosce le istruzioni di import: precaricare un file di modulo non precarica le sue dipendenze. modulepreload segue automaticamente gli import, ed è proprio questo il suo scopo.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Dove inserirlo
Nel <head>, il più presto possibile. Il browser avvia immediatamente la richiesta di preload e continua ad analizzare l'HTML. Quando più avanti nel documento incontra il corrispondente <script type="module">, il file è già in memoria.
Individuazione e attraversamento del grafo
Il browser analizza il modulo precaricato alla ricerca delle istruzioni import, quindi avvia ricorsivamente richieste parallele per ogni URL importato. L'utente sostiene il costo di un round trip per ogni livello, ma ottiene parallelismo all'interno di ciascun livello, accorciando drasticamente il percorso critico.
Usarlo con i bundler
I bundler moderni (Vite, Rollup, Webpack 5+) generano automaticamente i tag modulepreload per i chunk ottenuti tramite code splitting. Nelle applicazioni realizzate manualmente, li generi dal grafo degli import in fase di build, così l'elenco rimane aggiornato quando i moduli vengono aggiunti o rimossi.
Considerazioni su CrossOrigin
Per i preload di moduli cross-origin, includa crossorigin="anonymous". Questo corrisponde alla modalità di fetch predefinita di <script type="module"> e garantisce che la copia precaricata venga riutilizzata invece di essere scaricata nuovamente senza intestazioni CORS.
Supporto dei browser
modulepreload è supportato da Chrome/Edge/Safari e dalle versioni recenti di Firefox. Nelle versioni meno recenti di Firefox viene ignorato silenziosamente: i moduli continuano a funzionare, semplicemente senza il vantaggio del preload. Non è necessario alcun polyfill; nel caso peggiore, il caricamento sarà leggermente più lento nei browser obsoleti.
Limitare le dimensioni del grafo
Precaricare centinaia di moduli spreca banda per codice che l'utente potrebbe non eseguire mai. Precarichi solo i chunk di ingresso a livello di route, non quelli caricati in modo differito a livelli più profondi. Per i percorsi usati raramente, si affidi a prefetch oppure all'importazione su richiesta.
Combinazione con altri hint
Per immagini e font nello stesso head, può combinarli liberamente: preconnect per le CDN di terze parti, preload per i font critici, modulepreload per i moduli di ingresso e prefetch per gli asset della pagina successiva. Gli hint non interferiscono tra loro.
Verifica
Controlli il pannello Network: con modulepreload, gli import di secondo livello compaiono come richieste parallele che iniziano quasi contemporaneamente a quella del modulo di ingresso. Senza modulepreload, compaiono in modo scaglionato, con ogni richiesta avviata solo dopo che il modulo padre ha terminato l'analisi.
Verifica delle conoscenze
Che cosa fa modulepreload che un normale preload dello stesso file di modulo non fa?
Riepilogo
modulepreload elimina la cascata dei moduli ES recuperando il modulo di ingresso e i suoi import in parallelo prima dell'esecuzione. Lo inserisca all'inizio del <head>, lo generi dal grafo di build, imposti crossorigin per i moduli cross-origin e limiti l'ambito ai punti di ingresso delle route per evitare di sprecare banda.
Domande Frequenti
La lezione «Resource hints: modulepreload» è gratuita?
Sì — il testo completo di «Resource hints: modulepreload» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Resource hints: modulepreload»?
Precaricare i moduli ES per avviare più rapidamente JavaScript Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Resource hints: modulepreload»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Gli attributi async e defer
- Preload, prefetch e preconnect
- Caricamento differito delle immagini: loading=lazy
- Resource hints: modulepreload