Динамические импорты для компонентов
Теперь давайте обратим внимание на 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, которая не влияет на производительность сайта.