Автор оригинала: FreeCodeCamp Community Member.
Аль-Амин Яшад
Для ваших компонентов, изображений и чего нет
Lazy Loading – это старая техника для оптимизации веб-приложений, а также на мобильных приложениях. Дело довольно прямо вперед – не делайте вещи, если они не рассматриваются или требуются в этот момент. Итак, например, если у нас есть список сообщений, мы должны изначально сделать только то, что находится на просмотре. Это означает, что остальные элементы будут оказаны позже по требованию (когда они в области просмотра или о том, чтобы быть в просмотре).
Почему ленивая загрузка?
В большинстве случаев наши пользователи не видят всю веб-страницу, по крайней мере, в начале. Независимо от того, как наша заявка UI была структурирована, есть определенные компоненты, которые пользователь может не понадобиться изначально или когда-либо!
В этих случаях, оказание этих компонентов, не только наносит вред нашей производительности приложения, но и отдает массу ресурсов (особенно, когда у них есть изображения или похожие данные, голодные).
Таким образом, погрузка или оказание этих компонентов по требованию кажется более эффективным решением. Это может улучшить производительность приложения, и в то же время может сэкономить нам много ресурсов.
Как?
Мы собираемся сделать пример приложения, где мы можем применить ленивую нагрузку. Во-первых, нам нужно инициализировать наше приложение React, используя Create-React-App с командами ниже:
create-react-app lazydemocd lazydemonpm run start
Это может занять несколько минут и инициализации и открыть наше приложение React в браузере 3000 Порт по умолчанию.
Теперь мы собираемся сделать список, который покажет несколько случайных постов. Итак, давайте сначала получим некоторые фиктивные данные. Создать файл с именем data.js внутри SRC папка нашего проекта. Я только что скопировал вставленный JSON Ответ из этого JSON Конечная точка заполнятеля https://jsonforkholder.typicode.com/posts Отказ Вы также можете создавать свои собственные фиктивные данные. После формата ниже должно быть достаточно для этого руководства:
Давайте заменим App.js Содержание файла с кодом ниже:
Здесь мы просто делаем список Сообщения С их Название и Тело Отказ И с некоторыми простыми CSS Модификации мы получаем представление справа. Вот полный список оказывает одновременно. Теперь, если мы не хочем сделать все изначально, мы должны подать заявку ленивая загрузка Отказ Давайте установим его в наш проект:
Источник: Двайин / реактивный лазиловый род
npm install —-save react-lazyload
Теперь давайте обновим App.js Файл, импортируя и применяя Лазиловая дорога Отказ
Использование React-Lazyload довольно прямо вперед, просто оберните компонент с R компонент Установить Эфф ж. Высота и оффы эт лазилового компонента. Вы можете найти более подробную информацию о T Документация: https://github.com/twobin/rea CT-Lazyload # высота
Теперь все сообщения не оказываются изначально. Только несколько будут оказаны изначально в зависимости от просмотра просмотра. Но, поскольку содержимое – это текстовые до сих пор, эффект может вряд ли можно реализовать, если мы не проверяем и не увидим изменение DOM, когда они перемещаются с Загрузка к загружен Отказ
Чтобы сделать нашу ленивую загрузку более эффективными, давайте включим изображения внутри постов. Мы будем использовать Lorem Picsum для наших фотографий. Наш обновленный Пост Компонент должен выглядеть как ниже:
Теперь, как я уже говорил ранее, изображения являются данными голодными компонентами веб-страницы, и здесь мы загружаем изображения для каждого поста. Хотя весь компонент ленивый загружен, а изображение также загружается со компонентом, изображение нагрузки немного поздно и не так гладко. Итак, мы можем сделать лучший опыт загрузки изображения для нашего пользователя, используя Lazyload для отдельных изображений.
Техника состоит в том, чтобы загрузить очень низкое качество изображения в качестве заполнителя, а затем загружено исходное изображение. Итак, последний App.js будет выглядеть –
Теперь мы можем Свиток Список с нашими Осмотрите элемент открыть Чтобы посмотреть, как эти компоненты меняются, когда они приближаются к появлению Viewport, а затем оказывается, а заполнитель заменяется на фактическое содержание.
И на сегодняшний день наша лазиловая дорога работает со всей его благодати. Это было довольно легко !!!
Github: https://github.com/nowshad-sust/lazydemo.
Реагирование лазиловой дороги: Двайин / реактивный лазиловый род