HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
All web technology
Learn web development
Discover our tools
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.
L'appel import(), généralement appelé import dynamique, est une expression semblable à une fonction qui permet de charger un module ECMAScript de façon asynchrone et dynamique dans un environnement qui peut ne pas être un module.
import()
À la différence de la déclaration import, les imports dynamiques sont uniquement évalués lorsque c'est nécessaire et permettent une plus grande flexibilité syntaxique.
import
import(nomModule);
L'appel import() a une syntaxe qui ressemble à celle d'un appel de fonction, mais import est bien un mot-clé et pas une fonction. On ne peut pas créer de synonyme comme avec const monImport = import, cela déclenchera une exception SyntaxError.
const monImport = import
SyntaxError
nomModule
Le nom du module à importer. L'évaluation de l'identifiant est propre à l'hôte, mais suit toujours le même algorithme que les déclarations import statiques.
Cet appel renvoie une promesse qui est résolue en un objet contenant toutes les valeurs exportées de nomModule, avec la même forme qu'un import d'espace de noms (import * as nom from nomModule) : un objet ayant null comme prototype, et l'export par défaut étant disponible avec une clé intitulée default.
import * as nom from nomModule
null
default
La syntaxe de déclaration d'import (import quelquechose from "quelquepart") est statique et aura toujours comme résultat l'évaluation du module importé lors du chargement. Les imports dynamiques permettent de contourner cette rigidité syntaxique des déclarations d'import et de charger un module conditionnellement ou à la demande. Voici quelques raisons pour lesquelles vous pourriez avoir besoin d'utiliser un import dynamique :
import quelquechose from "quelquepart"
eval()
Veillez à utiliser les imports dynamiques uniquement si nécessaire. En effet, la forme statique est préférable pour le chargement initiale des dépendances et pourra bénéficier des outils d'analyse statique et de l'élimination du code mort (tree shaking).
Si votre fichier n'est pas exécuté comme un module (s'il est référencé dans un fichier HTML, la balise <script> doit contenir type="module"), vous ne pourrez pas utiliser les déclarations d'import statiques, mais la syntaxe d'import dynamique asynchrone sera toujours présente et permettra d'importer des modules dans des environnements sans module.
<script>
type="module"
(async () => { if (qqcEstVrai) { // on importe un module pour les effets de bord await import("?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fmodules%2Fmon-module.js"); } })();
Si votre projet utilise des paquets qui exportent des modules ECMAScript, il est aussi possible de les importer pour les effets de bord uniquement. Cela exécutera uniquement le code du paquet à partir du point d'entrée (et tous les fichiers qu'il importe à son tour).
Pour cela, on décomposera l'objet récupéré et on renommera la clé default.
(async () => { if (qqcEstVrai) { const { default: monDefaut, toto, truc, } = await import("?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fmodules%2Fmon-module.js"); } })();
Dans cet exemple, on montre comment charger une fonctionnalité sur la page en fonction d'une action de l'utilisatrice ou de l'utilisateur. Ici, il s'agit d'un clic sur un bouton qui déclenche l'appel à une fonction dans le module. Il ne s'agit pas de la seule façon d'implémenter cette fonctionnalité. L'appel import() prend également en charge await.
await
const main = document.querySelector("main"); for (const link of document.querySelectorAll("nav > a")) { link.addEventListener("click", (e) => { e.preventDefault(); import("?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fmodules%2Fmon-module.js") .then((module) => { module.loadPageInto(main); }) .catch((err) => { main.textContent = err.message; }); }); }
Pour des processus comme le rendu côté serveur, on doit avoir une logique conditionnelle selon que le code est exécuté côté serveur ou côté navigateur, car ils ont différentes variables globales ou modules (le navigateur aura par exemple accès aux API web comme document et navigator, tandis que le serveur aura accès au système de fichier du serveur). On peut réaliser cela avec un import dynamique conditionnel.
document
navigator
let monModule; if (typeof window === "undefined") { monModule = await import("module-utilise-cote-serveur"); } else { monModule = await import("module-utilise-cote-navigateur"); }
Les imports dynamiques permettent d'utiliser n'importe quelle expression comme identifiant du module, et pas uniquement des littéraux de chaînes de caractères.
Ici, on charge 10 modules, /modules/module-0.js, /modules/module-1.js, etc., en parallèle et on appelle la fonction load() exportée par chacun de ces modules.
/modules/module-0.js
/modules/module-1.js
load()
Promise.all( Array.from({ length: 10 }).map( (_, index) => import(`/modules/module-${index}.js`), ), ).then((modules) => modules.forEach((module) => module.load()));
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.