Ленивая загрузка — это практика отсрочки загрузки или инициализации ресурсов или объектов до тех пор, пока они действительно не понадобятся для повышения производительности и экономии системных ресурсов.
Ленивая загрузка — это метод, используемый для оптимизации ваших веб-приложений. Он работает путем рендеринга сначала только необходимых или критических элементов пользовательского интерфейса, а затем тихого рендеринга некритических элементов.
По мере того, как мы создаем компоненты кода, приложение растет, и размер пакета становится очень громоздким. Это может быстро сделать использование приложения очень трудным и особенно медленным, что имеет много недостатков, таких как длительное время загрузки и плохой пользовательский интерфейс. Ленивая загрузка — это способ избежать всего этого и имеет много других преимуществ.
Есть несколько преимуществ:
- Более быстрое время начальной загрузки
- Экономия пропускной способности/трафика данных
- Экономия системных ресурсов как на стороне клиента, так и на стороне сервера
На практике предоставление контента (изображений, контента) по запросу означает, что ваше приложение будет иметь лучший пользовательский интерфейс благодаря более быстрой работе и времени загрузки, и вашим пользователям это понравится!
Использование React.Lazy()
React.lazy() упрощает создание компонентов, которые загружаются с помощью динамического import(), но отображаются как обычные компоненты. Это автоматически вызывает загрузку пакета, содержащего компонент, при рендеринге компонента.
React.lazy() принимает в качестве аргумента функцию, которая должна вернуть обещание, вызвав import() для загрузки компонента. Возвращенное обещание разрешается в модуль с экспортом по умолчанию, содержащим компонент React.
Использование React.lazy() выглядит так:
Использование React.Suspense()
Компонент, созданный с помощью React.lazy(), загружается только тогда, когда его необходимо визуализировать. Поэтому во время загрузки ленивого компонента следует отображать какое-то замещающее содержимое, например индикатор загрузки. Это именно то, для чего предназначен React.Suspense.
React.Suspense — это компонент для упаковки ленивых компонентов. Вы можете обернуть несколько ленивых компонентов на разных уровнях иерархии одним компонентом Suspense.
Компонент Suspense принимает свойство fallback, которое принимает элементы React, которые вы хотите отобразить, в качестве содержимого-заполнителя, в то время как все ленивые компоненты загружаются.
Я создал очень простую демонстрацию, чтобы продемонстрировать использование React.lazy() и Suspense для отложенной загрузки компонентов.
App.js
Пользовательский компонент.jsx
UserComponent.constant.jsx
Выход:
На вашем локальном хосте это должно быть очень быстро, и вы не сможете заметить изменения. Однако вы можете создать вспомогательный таймер или просто смоделировать более медленную сеть, которая сможет показать вам, как именно происходят изменения в миллисекундах. Это можно сделать:
- открытие инструментов разработчика в вашем браузере
- выбор вкладки сети
- щелкнув вкладку онлайн в крайнем правом углу, чтобы открыть другие параметры (предустановки)
- выбираю быстрый 3G
Теперь вы можете обновить свой браузер и посмотреть, как происходит ленивая загрузка.
Полный исходный код этой демонстрации можно найти здесь
