Importaciones Dinámicas

En esta lección, reduciremos la cantidad de JavaScript cargado durante la carga inicial de la página desde bibliotecas de terceros.

Next.js soporta dynamic import() de ES2020 para JavaScript. Con esto, puedes importar módulos JavaScript dinámicamente y trabajar con ellos. También funcionan con renderizado del lado del servidor (SSR).

Piensa en las importaciones dinámicas como otra forma de dividir tu código en fragmentos manejables.

Abre el archivo pages/index.js y elimina estas dos importaciones al principio del archivo, ya que las importaremos dinámicamente más adelante.

import Fuse from 'fuse.js';
import _ from 'lodash';

Por ahora también queremos eliminar:

const fuse = new Fuse(countries, {
  keys: ['name'],
  threshold: 0.3,
});

Ahora que hemos eliminado este código, configuremos el campo de búsqueda para usar las bibliotecas importadas dinámicamente.

Podemos reemplazar el input con el siguiente código:

<input
  type="text"
  placeholder="Buscar país..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Cargar bibliotecas dinámicamente
    const Fuse = (await import('fuse.js')).default;
    const _ = (await import('lodash')).default;
 
    const fuse = new Fuse(countries, {
      keys: ['name'],
      threshold: 0.3,
    });
 
    const searchResult = fuse.search(value).map((result) => result.item);
 
    const updatedResults = searchResult.length ? searchResult : countries;
    setResults(updatedResults);
 
    // Simulación de analítica
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

Al usar Importaciones Dinámicas, esto soluciona el problema de "Eliminar JavaScript no utilizado" durante la carga de la página. Esto también mejora nuestro Tiempo hasta Interactivo (TTI), lo que ayuda a mejorar Retraso de la Primera Entrada (FID).

Ejecutemos otro Informe Lighthouse en Chrome DevTools para ver nuestro progreso.

Lectura Adicional

• Next.js: Documentación de Importaciones Dinámicas