HTML Academy · Lezione

Import() dinamico nei moduli

Caricare i moduli su richiesta con import() dinamico

Import() dinamico nei moduli è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 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.

L’espressione import()

A differenza della dichiarazione statica import, import("./module.js") è un’espressione che restituisce una Promise risolta con il namespace del modulo. Funziona ovunque: all’interno di funzioni, condizioni e persino script non modulari.

Code splitting

L’import dinamico è il principale meccanismo di code splitting. Un gestore delle route può rimandare il caricamento del codice di una route finché l’utente non vi accede: const mod = await import("./routes/admin.js"). I byte della route non vengono scaricati finché non sono necessari.

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

Namespace del modulo restituito

Il valore risolto è il namespace del modulo: un oggetto con gli export del modulo come proprietà. Può destrutturare gli export denominati inline oppure accedere all’export predefinito come module.default.

Gestione degli errori

Poiché import() restituisce una promise, gli errori dovuti a un recupero non riuscito o a un errore di sintassi vengono propagati a .catch(). Racchiuda gli import dinamici in try/catch (nelle funzioni asincrone) o utilizzi .catch() per gestire correttamente gli errori di rete.

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

Caricamento condizionale

Carichi i polyfill solo nei browser meno recenti: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). I browser moderni evitano completamente questi byte; quelli meno recenti sostengono il costo solo quando è necessario.

Risoluzione degli specifier

Lo specifier segue le stesse regole dell’import statico: URL relativi, URL assoluti o bare name mappati tramite un’import map. Sono supportate anche stringhe dinamiche: import(`./locales/${lang}.js`), anche se i bundler potrebbero avere difficoltà a eseguire il code splitting in questo caso.

Caching

Ogni specifier univoco viene risolto nella stessa istanza del modulo. Il secondo import("./mod.js") restituisce il modulo già caricato senza un nuovo roundtrip di rete, rendendo sicuro utilizzare l’import dinamico nei gestori degli eventi senza preoccuparsi di download ripetuti.

Import dinamico al livello superiore

All’interno di un modulo può utilizzare await al livello superiore con un import dinamico per ritardare l’esecuzione finché non è disponibile un helper caricato in modo asincrono. È utile nei sistemi di plugin in cui l’elenco dei plugin viene determinato a runtime.

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

Utilizzo con React.lazy e Preact

React.lazy, `lazy` di Preact da preact/compat e defineAsyncComponent di Vue racchiudono tutti l’import dinamico per eseguire il code splitting a livello di componente. La primitiva del browser è import(); i framework aggiungono livelli di caricamento simili a Suspense.

Code splitting con Webpack e Vite

I bundler individuano import("...") nel codice sorgente ed emettono un chunk separato per il modulo importato. Lo stub a runtime recupera il chunk alla prima chiamata. L’autore scrive import() conforme alle specifiche ES; il bundler produce il coordinamento delle richieste di rete.

Errore comune

Chiamare import("X") all’interno di un hot path (ad esempio in un ciclo di rendering) ricontrolla la cache a ogni chiamata. Anche se il modulo non viene scaricato di nuovo, la ricerca comporta un costo. Dopo il primo import, memorizzi il namespace risolto in una variabile.

Verifica delle conoscenze

Che cosa restituisce import("./mod.js")?

Riepilogo

L’import dinamico import() è l’equivalente su richiesta della dichiarazione import statica. Restituisce una Promise che si risolve nel namespace del modulo, consentendo il code splitting, i polyfill condizionali e i sistemi di plugin. Dopo il primo import i moduli vengono memorizzati nella cache, quindi le chiamate successive non comportano nuovi download. I bundler emettono chunk separati per ogni chiamata di import dinamico.

Domande Frequenti

La lezione «Import() dinamico nei moduli» è gratuita?

Sì — il testo completo di «Import() dinamico nei moduli» è 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 «Import() dinamico nei moduli»?

Caricare i moduli su richiesta con import() dinamico 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 3 di 4.

Quanto tempo richiede la lezione «Import() dinamico nei moduli»?

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

← Torna a HTML Academy