Importations dynamiques JavaScript

Découvrez cette nouvelle fonctionnalité à venir de JavaScript

Je n'ai jamais eu le privilège d'utiliserimportations dynamiquesjusqu'à très récemment lorsque je les ai utilisés pour alimenter le fractionnement de code dans une application Next.js, et j'ai dû faire un peu de recherche car ils sont légèrement différents deimportations statiques.

Une importation statique d'un module ESexportation par défautressemble à ça:

import moment from 'moment'

Vous pouvez utiliser la déstructuration d'objets pour obtenir une exportation nommée:

import { format } from 'date-fns'

Les importations statiques ont certaines limites:

  • ils sont limités au niveau supérieur du fichier
  • ils ne peuvent pas être chargés conditionnellement (à l'intérieur d'unif)
  • le nom du package ne peut pas être déterminé au moment de l'exécution

Les importations dynamiques peuvent faire toutes ces choses!

La syntaxe est un peu différente.

Et ils travaillentdans les modules.

Vous les utilisez comme ceci:

const module = await import('module')

et pour utiliser l'exportation par défaut, vous devez d'abord appeler.default().

Exemple utilisant le moment:

const moment = (await import('moment')).default()

Les importations nommées, en revanche, fonctionnent comme prévu:

const { format } = await import('date-fns')

Pouvez-vous les utiliser aujourd'hui? Oui! Lesupport du navigateurest déjà assez bon, et il y a aussi unPlugin Babel.

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: