Динамические импорты

В этом уроке мы уменьшим объем JavaScript, загружаемого при первоначальной загрузке страницы из сторонних библиотек.

Next.js поддерживает ES2020 динамический import() для JavaScript. С его помощью вы можете динамически импортировать модули JavaScript и работать с ними. Они также работают с рендерингом на стороне сервера (SSR).

Рассматривайте динамические импорты как еще один способ разделить ваш код на управляемые части.

Откройте файл pages/index.js и удалите эти два импорта в начале файла, так как мы будем динамически импортировать их далее в коде.

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

На данный момент также удалим:

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

Теперь, когда мы удалили этот код, давайте настроим поле поиска для использования динамически импортируемых библиотек.

Мы можем заменить поле ввода следующим кодом:

<input
  type="text"
  placeholder="Поиск страны..."
  className={styles.input}
  onChange={async (e) => {
    const { value } = e.currentTarget;
    // Динамическая загрузка библиотек
    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);
 
    // Фейковый вызов аналитики
    console.info({
      searchedAt: _.now(),
    });
  }}
/>

Использование динамических импортов решает проблему "Remove unused JavaScript" при загрузке страницы. Это также улучшает наш Time to Interactive (TTI), что помогает улучшить First Input Delay (FID).

Давайте запустим еще один отчет Lighthouse в Chrome DevTools, чтобы увидеть наш прогресс.

Дополнительные материалы

• Next.js: Документация по динамическим импортам