`import()` dynamique dans les modules
Chargez les modules à la demande avec `import()` dynamique.
`import()` dynamique dans les modules est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
L’expression import()
Contrairement à la déclaration import statique, import("./module.js") est une expression qui renvoie une promesse se résolvant vers l’espace de noms du module. Elle fonctionne partout — dans des fonctions, des conditions, voire dans des scripts qui ne sont pas des modules.
Découpage du code
L’importation dynamique est le principal mécanisme de découpage du code. Un gestionnaire de route peut différer le chargement du code de la route jusqu’à ce que l’utilisateur y accède : const mod = await import("./routes/admin.js"). Les octets de la route ne sont jamais téléchargés avant d’être nécessaires.
document.getElementById("settings-btn").addEventListener("click", async () => {
const { renderSettings } = await import("./settings.js");
renderSettings();
});Espace de noms du module renvoyé
La valeur résolue est l’espace de noms du module — un objet dont les exportations sont des propriétés. Déstructurez les exportations nommées directement, ou accédez à l’exportation par défaut avec module.default.
Interception des erreurs
Comme import() renvoie une promesse, les erreurs provenant d’une récupération échouée ou d’une erreur de syntaxe se propagent jusqu’à .catch(). Entourez les importations dynamiques d’un try/catch (dans des fonctions asynchrones) ou de .catch() pour gérer élégamment les défaillances réseau.
try {
const mod = await import("./optional.js");
mod.run();
} catch (e) {
console.warn("Optional module failed", e);
}Chargement conditionnel
Chargez les correctifs de compatibilité uniquement dans les anciens navigateurs : if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Les navigateurs modernes ignorent entièrement ces octets ; les anciens n’en paient le coût que lorsque cela est nécessaire.
Résolution des spécificateurs
Le spécificateur suit les mêmes règles qu’une importation statique : URL relatives, URL absolues ou noms nus associés via une carte d’importation. Les chaînes dynamiques fonctionnent également : import(`./locales/${lang}.js`), bien que les outils de regroupement puissent avoir du mal à découper ce code.
Mise en cache
Chaque spécificateur unique se résout vers la même instance de module. Le deuxième import("./mod.js") renvoie le module déjà chargé sans nouvel aller-retour réseau — ce qui rend l’importation dynamique sûre à utiliser dans les gestionnaires d’événements, sans craindre les téléchargements répétés.
Importation dynamique au niveau supérieur
Dans un module, vous pouvez utiliser await au niveau supérieur avec une importation dynamique afin de retarder l’exécution jusqu’à ce qu’un module auxiliaire chargé de manière asynchrone soit disponible. C’est utile pour les systèmes de modules d’extension dont la liste est connue à l’exécution.
// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();Utilisation avec React.lazy et Preact
React.lazy, la fonction `lazy` de preact/compat de Preact et defineAsyncComponent de Vue encapsulent tous l’importation dynamique pour effectuer un découpage du code au niveau des composants. Le mécanisme natif du navigateur est import() ; les cadres applicatifs ajoutent par-dessus des frontières de chargement semblables à celles de suspense.
Découpage avec Webpack et Vite
Les outils de regroupement repèrent import("...") dans le code source et produisent un fragment séparé pour le module importé. Le relais d’exécution récupère le fragment lors du premier appel. L’auteur écrit un import() conforme à la spécification ES ; l’outil de regroupement orchestre les requêtes réseau.
Erreur courante
Appeler import("X") dans un chemin critique (par exemple dans une boucle de rendu) vérifie à nouveau le cache à chaque appel. Même si cela ne provoque pas de nouveau téléchargement, la recherche a un coût. Stockez l’espace de noms résolu dans une variable après la première importation.
Vérification des connaissances
Que renvoie import("./mod.js") ?
Résumé
L’importation dynamique import() est la version à la demande de la déclaration import statique. Elle renvoie une promesse se résolvant vers l’espace de noms du module, ce qui permet le découpage du code, les correctifs de compatibilité conditionnels et les systèmes de modules d’extension. Les modules sont mis en cache après la première importation, donc les appels suivants ne coûtent rien. Les outils de regroupement produisent des fragments distincts pour chaque appel d’importation dynamique.
Questions Fréquemment Posées
La leçon « `import()` dynamique dans les modules » est-elle gratuite ?
Oui — le texte complet de « `import()` dynamique dans les modules » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `import()` dynamique dans les modules » ?
Chargez les modules à la demande avec `import()` dynamique. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « `import()` dynamique dans les modules » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Scripts de modules ES : `type=module`
- Cartes d’importation : `importmap`
- `import()` dynamique dans les modules
- Notions fondamentales de la fédération de modules