Importaciones dinámicas de JavaScript

Conozca esta nueva y próxima función de JavaScript

Nunca he tenido el privilegio de usarimportaciones dinámicashasta hace muy poco, cuando los usé para impulsar la división de código en una aplicación Next.js, y tuve que investigar un poco porque son ligeramente diferentes deimportaciones estáticas.

Una importación estática de un módulo ESexportación predeterminadaSe ve como esto:

import moment from 'moment'

Puede usar la desestructuración de objetos para obtener una exportación con nombre:

import { format } from 'date-fns'

Las importaciones estáticas tienen algunos límites:

  • están limitados al nivel superior del archivo
  • no se pueden cargar condicionalmente (dentro de unif)
  • el nombre del paquete no se puede determinar en el momento de la ejecución

¡Las importaciones dinámicas pueden hacer todas esas cosas!

La sintaxis es un poco diferente.

Y funcionandentro de los módulos.

Los usas así:

const module = await import('module')

y para utilizar la exportación predeterminada, primero debe llamar.default().

Ejemplo usando momento:

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

Las importaciones nombradas, por otro lado, funcionan como se esperaba:

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

¿Puedes usarlos hoy? ¡Sí! lossoporte de navegadorya es bastante bueno, y también hay unComplemento de Babel.


Más tutoriales de js: