Kako optimizirati React aplikacije s Lazy Loading?

Za vaše komponente, slike i što već ne

Lijeno učitavanje stara je tehnika za optimizaciju web aplikacija kao i za mobilne aplikacije. Stvar je prilično naprijed - nemojte prikazivati ​​stvari ako se u tom trenutku ne pregledaju ili ne zahtijevaju. Tako, na primjer, ako imamo popis postova koje bismo trebali prikazati, u početku bismo trebali prikazivati ​​samo ono što se nalazi na okviru za prikaz. To znači da će se ostatak elemenata prikazati kasnije na zahtjev (kada su u okviru za prikaz ili će tek biti u okviru).

Zašto lijeno učitavanje?

Većina slučajeva naši korisnici ne vide cijelu web stranicu, barem na početku. Bez obzira na to kako je korisničko sučelje naše aplikacije strukturirano, postoje određene komponente koje korisniku možda neće trebati u početku ili uopće!

U tim slučajevima prikazivanje tih komponenti ne samo da šteti izvedbi naše aplikacije, već i troši puno resursa (pogotovo kada imaju slike ili sličan sadržaj koji gladni podataka).

Dakle, čini se da je učitavanje ili prikazivanje tih komponenata na zahtjev učinkovitija odluka. Može poboljšati izvedbu aplikacije, a istovremeno nam može uštedjeti puno resursa.

Kako?

Napravit ćemo uzorak aplikacije u kojoj možemo primijeniti lijeno opterećenje. Prvo, moramo inicijalizirati našu React aplikaciju pomoću create-react-appnaredbi u nastavku:

create-react-app lazydemocd lazydemonpm run start

To bi moglo potrajati nekoliko minuta da se inicijalizira i 3000prema zadanim postavkama otvori naša aplikacija za reagiranje u portu preglednika .

Ako create-react-appna računalu niste instalirali, možete ga instalirati naredbom: npm install -g create-react-app

Sad ćemo napraviti popis koji će prikazivati ​​neke nasumične postove. Pa, hajde da prvo uzmemo lažne podatke. Stvorite datoteku nazvanu data.jsunutar srcmape našeg projekta. Upravo sam kopirao jsonodgovor iz ove JSONkrajnje točke rezerviranog mjesta //jsonplaceholder.typicode.com/posts. Možete stvoriti i vlastite lažne podatke. Sljedeći format u nastavku trebao bi biti dovoljan za ovaj vodič:

Zamijenimo App.jssadržaj datoteke kodom u nastavku:

Ovdje jednostavno pravimo popis postssa njihovim titlei body. A s nekoliko jednostavnih CSSpreinaka dobivamo pogled s desne strane. Evo odjednom cjelokupnog prikaza. Sad, ako ne želimo u početku sve pružiti, trebali bismo se prijaviti lazy loading. Ugradimo ga u naš projekt:

Izvor: twobin / response-lazyload

npm install —-save react-lazyload

Sada, ažurirajmo App.jsdatoteku uvozom i primjenom lazyload.

Korištenje react-lazyloadje prilično izravno, samo omotajte komponentu s prikazom Učitavanje ... dok se komponenta ne učita. Mi također mogu e EFF visine et o LazyLoad komponente. Više detalja možete pronaći u dokumentaciji: //github.com/twobin/react-lazyload#heightLazyLoad>. Here we are using a placeholder component > tha set thectiveand offs

Sada se svi postovi u početku ne prikazuju. U početku će se prikazati samo nekoliko, ovisno o pogledu. No, kao što je sadržaj tekstualne do sada, učinak može biti teško ostvaruje, osim ako smo provjeriti i vidjeti DOM-a mijenja kada se kretati od loadingdo loaded.

Da bi naše lijeno učitavanje bilo učinkovitije, ugradimo slike u postove. Za naše ćemo fotografije koristiti Lorem Picsum. Naša ažurirana Postkomponenta trebala bi izgledati dolje:

Lorem Picsum url format

//picsum.photos/id/[image_id]/ [širina] / [visina]

Kao što sam već rekao, slike su komponente web stranice koje traže podatke i ovdje učitavamo slike za svaki post. Iako je cijela komponenta lijeno učitana, a slika se također opterećuje komponentom, slika se učitava malo kasno i ne tako glatko. Dakle, možemo napraviti bolji doživljaj učitavanja slika za naše korisnike koristeći LazyLoad za pojedinačne slike.

Tehnika je učitavanje vrlo nekvalitetne slike kao rezerviranog mjesta, a zatim se učitava izvorna slika. Dakle, finale App.jsbi izgledalo kao -

Sada možemo scrolls našim popisom inspect element openvidjeti kako se ove komponente mijenjaju kada se približe pogledu za prikaz, a zatim se generiraju, a rezervirano mjesto zamjenjuje stvarnim sadržajem.

I gotovi smo, zasad, naš LazyLoad radi sa svom svojom gracioznošću. To je bilo prilično lako !!!

Slika LazyLoad ovdje nije najbolji slučaj upotrebe, jer već obrađuje komponenta LazyLoad. Ali, tehnika može biti vrlo korisna u drugim slučajevima korištenja kada moramo pokazati puno slika. Pokušajte onemogućiti komponentu LazyLoad on Post, ali zadržite sliku LazyLoad, možete vidjeti njezin učinak.

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

React LazyLoad: dvostruko / reagiraj-lazyload