Динамические импорты для компонентов

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

React-компоненты также можно импортировать с помощью динамических импортов, но в этом случае мы используем их вместе с next/dynamic, чтобы убедиться, что они работают как любые другие React-компоненты.

Мы будем использовать этот метод для отложенной загрузки нашего модального окна с примером кода Hello World. Это также позволит нам убрать две дополнительные сторонние библиотеки из первоначальной загрузки страницы.

Откройте файл pages/index.js и добавьте импорт dynamic из next/dynamic в начале файла:

import dynamic from 'next/dynamic';

Также следует удалить эту строку:

import CodeSampleModal from '../components/CodeSampleModal';

Теперь мы можем импортировать его как динамический компонент, добавив следующее в начало файла:

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

CodeSampleModal будет компонентом по умолчанию, возвращаемым из ../components/CodeSampleModal. Он работает как обычный React-компонент, и вы можете передавать ему пропсы как обычно.

Поскольку этот компонент не нужен на сервере, мы используем ssr: false, чтобы отключить его серверный рендеринг.

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

Оберните компонент CodeSampleModal следующим образом:

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

Теперь, когда isModalOpen впервые переключается в true, будет запрошен необходимый JavaScript-код.

С этими оптимизациями показатели Web Vitals должны улучшиться. Давайте запустим ещё один отчёт Lighthouse в Chrome DevTools для проверки.

У нас осталось две рекомендации по оптимизации:

  • Использовать HTTP/2: для решения этой проблемы можно выполнить развёртывание на платформе с поддержкой HTTP/2 (например, Vercel).
  • У элементов изображения отсутствуют явные width и height: На самом деле это ошибка в Lighthouse, которая не влияет на производительность сайта.

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