Разделение кода с помощью React.lazy и Suspense

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

Хуссейн Джирдех
Houssein Djirdeh
X GitHub Homepage
Джефф Посник

Метод React.lazy упрощает разделение кода приложения React на уровне компонентов с помощью динамического импорта.

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

Почему это полезно?

Большое React-приложение обычно состоит из множества компонентов, служебных методов и сторонних библиотек. Если не попытаться загружать различные части приложения только тогда, когда это необходимо, пользователям будет отправлен один большой пакет JavaScript-кода сразу после загрузки первой страницы. Это может существенно повлиять на производительность страницы.

Функция React.lazy предоставляет встроенный способ разделения компонентов приложения на отдельные фрагменты JavaScript с минимальными усилиями. Затем вы можете позаботиться о загрузке состояний, связав её с компонентом Suspense .

Саспенс

Проблема доставки пользователям большого объёма JavaScript-данных заключается в длительности загрузки страницы, особенно на слабых устройствах и слабых сетевых соединениях. Именно поэтому разделение кода и отложенная загрузка чрезвычайно полезны.

Однако при загрузке компонента с разделённым кодом по сети пользователи всегда будут сталкиваться с небольшой задержкой, поэтому важно отображать полезное состояние загрузки. Использование React.lazy с компонентом Suspense помогает решить эту проблему.

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
)

Suspense принимает fallback компонент, позволяющий отображать любой компонент React в состоянии загрузки. Следующий пример показывает, как это работает. Аватар отображается только при нажатии кнопки, после чего выполняется запрос на получение кода, необходимого для приостановленного AvatarComponent . В это время отображается резервный компонент загрузки.

Здесь код, составляющий AvatarComponent , небольшой, поэтому индикатор загрузки отображается лишь на короткое время. Более крупные компоненты могут загружаться гораздо дольше, особенно при слабом сетевом соединении.

Чтобы лучше продемонстрировать, как это работает:

  • Для предварительного просмотра сайта нажмите «Просмотреть приложение» . Затем нажмите «Полный экран». полноэкранный .
  • Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
  • Откройте вкладку Сеть .
  • Нажмите раскрывающийся список «Регулирование », в котором по умолчанию установлено значение «Без регулирования» . Выберите «Быстрый 3G» .
  • Нажмите кнопку «Нажми меня» в приложении.

Индикатор загрузки теперь будет отображаться дольше. Обратите внимание, что весь код, составляющий компонент AvatarComponent загружается как отдельный фрагмент.