Как да оптимизираме React приложенията с Lazy Loading?

За вашите компоненти, изображения и какво ли още не

Мързеливото зареждане е стара техника за оптимизиране на уеб приложения, както и на мобилни приложения. Работата е доста права - не изобразявайте нещата, ако в момента не са прегледани или необходими. Така например, ако имаме списък с публикации, които да покажем, първоначално трябва да изобразяваме само това, което е в прозореца за гледане. Това означава, че останалите елементи ще бъдат изобразени по-късно при поискване (когато са в прозореца за показване или ще бъдат в прозореца за гледане).

Защо мързеливо зареждане?

Повечето пъти нашите потребители не виждат цялата уеб страница, поне в началото. Без значение как е структуриран потребителският интерфейс на нашето приложение, има определени компоненти, от които потребителят може да не се нуждае първоначално или изобщо!

В тези случаи изобразяването на тези компоненти не само уврежда производителността на нашето приложение, но също така губи много ресурси (особено когато имат изображения или подобно съдържание, нуждаещо се от данни).

Така че зареждането или изобразяването на тези компоненти при поискване изглежда по-ефективно решение. Той може да подобри производителността на приложението и в същото време да ни спести много ресурси.

Как

Ще направим примерно приложение, където можем да приложим мързеливо натоварване. Първо, трябва да инициализираме нашето приложение 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 will show Loading ... докато компонентът се зареди. Можем също така електронна ЕФР височина et компонент LazyLoad. Можете да намерите повече подробности за документацията: //github.com/twobin/react-lazyload#heightLazyLoad>. Here we are using a placeholder component> thaset thectiveand offs

Сега всички публикации не се показват първоначално. Първоначално ще бъдат изобразени само няколко в зависимост от изгледа. Но тъй като съдържанието досега е текстово, ефектът трудно може да бъде реализиран, освен ако не проверим и видим, че DOM се променя, когато се преместят от loadingкъм loaded.

За да направим нашето мързеливо зареждане по-ефективно, нека включим изображения в публикациите. Ще използваме Lorem Picsum за нашите снимки. Нашият актуализиран Postкомпонент трябва да изглежда по-долу:

Lorem Picsum url формат

//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