Як оптимізувати програми React за допомогою «Ледачого завантаження»?

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

Ледаче завантаження - це стара методика оптимізації веб-додатків, а також мобільних додатків. Справа досить пряма - не відтворюйте речі, якщо вони не переглянуті або потрібні на той момент. Так, наприклад, якщо у нас є список публікацій, які слід показати, спочатку ми повинні відображати лише те, що знаходиться у вікні перегляду. Це означає, що решта елементів буде відтворена пізніше на вимогу (коли вони перебувають у вікні перегляду або збираються бути у вікні перегляду).

Чому ліниве завантаження?

У більшості випадків наші користувачі не бачать цілу веб-сторінку, принаймні на початку. Незалежно від того, як був побудований наш інтерфейс додатка, є певні компоненти, які користувачеві можуть не знадобитися спочатку чи ніколи!

У цих випадках візуалізація цих компонентів не тільки шкодить продуктивності нашого додатку, але і витрачає багато ресурсів (особливо, якщо вони містять зображення або схожий на вміст даних).

Отже, завантаження або візуалізація цих компонентів на вимогу, здається, є більш ефективним рішенням. Це може покращити продуктивність програми, і в той же час може заощадити нам багато ресурсів.

Як?

Ми збираємось зробити зразок програми, де ми можемо застосувати ліниве навантаження. По-перше, нам потрібно ініціалізувати наш додаток 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 placeholder component> thaset thectiveand offs

Зараз усі публікації спочатку не відображаються. Спочатку буде відтворено лише декілька, залежно від області перегляду. Але, оскільки вміст досі є текстовим, ефект навряд чи можна реалізувати, якщо ми не перевіримо і не побачимо, як DOM змінюється, коли вони переходять з loadingна loaded.

Щоб зробити наше ліниве завантаження більш ефективним, давайте включимо зображення всередину дописів. Для наших фотографій ми використаємо Lorem Picsum. Наш оновлений Postкомпонент повинен виглядати нижче:

Формат URL-адреси Lorem Picsum

//picsum.photos/id/ [image_id]/ [ширина] / [висота]

Зараз, як я вже говорив раніше, зображення є голодними компонентами веб-сторінки, і тут ми завантажуємо зображення для кожного повідомлення. Хоча весь компонент ледаче завантажується, і зображення також завантажується компонентом, зображення завантажується трохи пізно і не так плавно. Отже, ми можемо зробити кращий досвід завантаження зображень для нашого користувача, використовуючи LazyLoad для окремих зображень.

Метод полягає у завантаженні дуже низької якості зображення як заповнювача, а потім завантажується оригінальне зображення. Отже, фінал App.jsвиглядав би так -

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

І ми закінчили, поки що наш LazyLoad працює з усією своєю витонченістю. Це було досить просто !!!

Зображення LazyLoad тут не найкращий варіант використання, оскільки воно вже обробляється компонентом LazyLoad. Але, техніка може бути дуже корисною в інших випадках використання, коли нам доводиться показувати багато зображень. Спробуйте вимкнути компонент LazyLoad on Post, але збережіть образ LazyLoad, ви можете побачити його ефект.

Github: //github.com/nowshad-sust/lazydemo

React LazyLoad: twobin / response-lazyload