Що стосується ваших компонентів, зображень, а що ні

Ледаче завантаження - це стара методика оптимізації веб-додатків, а також мобільних додатків. Справа досить пряма - не відтворюйте речі, якщо вони не переглянуті або потрібні на той момент. Так, наприклад, якщо у нас є список публікацій, які слід показати, спочатку ми повинні відображати лише те, що знаходиться у вікні перегляду. Це означає, що решта елементів буде відтворена пізніше на вимогу (коли вони перебувають у вікні перегляду або збираються бути у вікні перегляду).
Чому ліниве завантаження?
У більшості випадків наші користувачі не бачать цілу веб-сторінку, принаймні на початку. Незалежно від того, як був побудований наш інтерфейс додатка, є певні компоненти, які користувачеві можуть не знадобитися спочатку чи ніколи!
У цих випадках візуалізація цих компонентів не тільки шкодить продуктивності нашого додатку, але і витрачає багато ресурсів (особливо, якщо вони містять зображення або схожий на вміст даних).
Отже, завантаження або візуалізація цих компонентів на вимогу, здається, є більш ефективним рішенням. Це може покращити продуктивність програми, і в той же час може заощадити нам багато ресурсів.
Як?
Ми збираємось зробити зразок програми, де ми можемо застосувати ліниве навантаження. По-перше, нам потрібно ініціалізувати наш додаток React, використовуючи create-react-app
команди нижче:
create-react-app lazydemocd lazydemonpm run start
Це може зайняти кілька хвилин для ініціалізації та відкриття нашої програми реагування в 3000
порту браузера за замовчуванням.
create-react-app
встановили на своєму ПК, ви можете встановити за допомогою команди:npm install -g create-react-app
Зараз ми складемо список, який відображатиме кілька випадкових повідомлень. Отже, давайте спочатку отримаємо кілька фіктивних даних. Створіть файл із назвою data.js
всередині src
папки нашого проекту. Я щойно скопіював json
відповідь із цієї JSON
кінцевої точки заповнювача //jsonplaceholder.typicode.com/posts. Ви також можете створити власні фіктивні дані. Для цього підручника має бути достатньо наведеного нижче формату:

Давайте замінимо App.js
вміст файлу кодом нижче:


Тут ми просто складаємо список posts
з їх title
і body
. І за допомогою деяких простих CSS
модифікацій ми отримуємо вигляд праворуч. Ось повний список рендерів відразу. Тепер, якщо ми не хочемо зробити все спочатку, нам слід подати заявку lazy loading
. Давайте встановимо його в наш проект:
Джерело: twobin / response-lazyload
npm install —-save react-lazyload
Тепер давайте оновимо App.js
файл, імпортуючи та застосовуючи lazyload
.

Використання react-lazyload
досить прямо, просто оберніть компонент t t show "Loading ...", поки компонент не завантажиться. Ми також можемо е еф висоти ЕТ компонента LazyLoad. Детальнішу інформацію можна знайти в документації: //github.com/twobin/react-lazyload#height … LazyLoad>. Here we are using a placeholde
r component
set th
ective
and offs
Зараз усі публікації спочатку не відображаються. Спочатку буде відтворено лише декілька, залежно від області перегляду. Але, оскільки вміст досі є текстовим, ефект навряд чи можна реалізувати, якщо ми не перевіримо і не побачимо, як DOM змінюється, коли вони переходять з loading
на loaded
.
Щоб зробити наше ліниве завантаження більш ефективним, давайте включимо зображення всередину дописів. Для наших фотографій ми використаємо Lorem Picsum. Наш оновлений Post
компонент повинен виглядати нижче:

//picsum.photos/id/ [image_id]/ [ширина] / [висота]
Зараз, як я вже говорив раніше, зображення є голодними компонентами веб-сторінки, і тут ми завантажуємо зображення для кожного повідомлення. Хоча весь компонент ледаче завантажується, і зображення також завантажується компонентом, зображення завантажується трохи пізно і не так плавно. Отже, ми можемо зробити кращий досвід завантаження зображень для нашого користувача, використовуючи LazyLoad для окремих зображень.
Метод полягає у завантаженні дуже низької якості зображення як заповнювача, а потім завантажується оригінальне зображення. Отже, фінал App.js
виглядав би так -

Тепер ми можемо створити scroll
список із нашими, inspect element open
щоб побачити, як ці компоненти змінюються, коли вони наближаються до області перегляду, потім відтворюється, а заповнювач замінюється фактичним вмістом.
І ми закінчили, поки що наш LazyLoad працює з усією своєю витонченістю. Це було досить просто !!!

Github: //github.com/nowshad-sust/lazydemo
React LazyLoad: twobin / response-lazyload