A komponenseihez, képeihez, és mi nem

A lusta betöltés egy régi technika a webalkalmazások, valamint a mobilalkalmazások optimalizálására. A dolog eléggé előre mutat - ne tegye a dolgokat, ha azokat nem nézik meg, vagy nem igénylik abban a pillanatban. Tehát, ha például van egy listánk a megjelenítendő bejegyzésekről, akkor kezdetben csak azt kellene megjelenítenünk, ami a nézetablakban található. Ez azt jelenti, hogy a többi elem később megjelenik igény szerint (amikor a nézetablakban vannak, vagy éppen a nézetablakban lesznek).
Miért Lusta töltés?
Legtöbbször a felhasználóink nem látják a teljes weboldalt, legalábbis az elején. Nem számít, hogyan épült fel az alkalmazás felhasználói felületünk, vannak olyan összetevők, amelyekre a felhasználónak kezdetben vagy soha nem lesz szüksége!
Ezekben az esetekben ezeknek az összetevőknek a renderelése nemcsak az alkalmazásunk teljesítményét károsítja, hanem rengeteg erőforrást is pazarol (különösen, ha képeik vagy hasonló adatokra éhes tartalmuk van).
Tehát hatékonyabb döntésnek tűnik ezen alkatrészek igény szerinti betöltése vagy renderelése. Javíthatja az alkalmazás teljesítményét, ugyanakkor rengeteg erőforrást takaríthat meg nekünk.
Hogyan?
Készítünk egy minta alkalmazást, ahol lusta terhelést alkalmazhatunk. Először create-react-app
az alábbi parancsokkal kell inicializálnunk a React alkalmazást :
create-react-app lazydemocd lazydemonpm run start
Ez eltarthat néhány percig, 3000
mire inicializálja és alapértelmezés szerint megnyitja a reakcióalkalmazást a böngésző portjában.
create-react-app
telepítve a számítógépére, akkor a következő paranccsal telepítheti:
npm install -g create-react-app
Most összeállítunk egy listát, amely néhány véletlenszerű bejegyzést tartalmaz. Tehát először szerezzünk be némi adatokat. Hozzon létre egy fájlt nevű data.js
belső src
mappában a projekthez. Nemrég másoltam be a json
választ erről a JSON
helyőrző végpontról //jsonplaceholder.typicode.com/posts. Létrehozhat saját dummy adatokat is. Az alábbi formátum követésének elegendőnek kell lennie ehhez az oktatóanyaghoz:

Cseréljük le a App.js
fájl tartalmát az alábbi kóddal:


Itt vagyunk, egyszerűen csak egy listát posts
azok title
és body
. Néhány egyszerű CSS
módosítással a jobb oldali képet kapjuk. Itt a teljes lista egyszerre megjelenik. Ha most nem akarunk mindent renderelni, akkor jelentkeznünk kell lazy loading
. Telepítsük a projektünkbe:
Forrás: twobin / reagál-lusta
npm install —-save react-lazyload
Most frissítsük a App.js
fájlt importálással és alkalmazással lazyload
.

A használat react-lazyload
meglehetősen egyenes előre, csak tekerje be az összetevőt úgy, hogy a t betűvel jelenik meg a Loading ... amíg az összetevő be nem töltődik. Azt is E eff magassága és a LazyLoad komponenst. További részletek a dokumentációban találhatók: //github.com/twobin/react-lazyload#height …
LazyLoad>. Here we are using a placeholde
r component
set th
ective
and offs
Most kezdetben az összes bejegyzést nem rendereljük. A nézetablaktól függően kezdetben csak néhányat renderelünk. De, mint a tartalom szöveges eddig, a hatás lehet alig érvényesülni, ha mi vizsgáljuk, és látni a DOM változó mikor költöznek loading
az loaded
.
A lusta betöltés hatékonyabbá tétele érdekében építsünk be képeket a bejegyzésekbe. Lorem Picsumot fogjuk használni fotóinkhoz. Frissített Post
komponensünknek az alábbiak szerint kell kinéznie:

//picsum.photos/id/[image_id] / [szélesség] / [magasság]
Most, mint korábban mondtam, a képek egy weboldalra éhes alkotóelemek, és itt minden bejegyzéshez képeket töltünk be. Bár az egész komponens lustán betöltődik, és a kép is betöltődik az alkatrésszel, a kép kissé későn töltődik be, és nem olyan simán. Tehát jobb képbetöltési élményt tehetünk felhasználóink számára, ha a LazyLoad alkalmazást használjuk az egyes képekhez.
A technika az, hogy nagyon rossz minőségű képet tölt be helyőrzőként, majd az eredeti kép betöltődik. Szóval, a döntő App.js
így néz ki:

Most összeállíthatjuk scroll
a listát, inspect element open
hogy lássuk, miként változnak ezek az összetevők, amikor a nézetablak közelébe kerülnek, majd megjelenik, és a helyőrző helyébe a tényleges tartalom lép.
És készen vagyunk, egyelőre a LazyLoad minden kegyelmével dolgozik. Ez nagyon egyszerű volt !!!

Github: //github.com/nowshad-sust/lazydemo
React LazyLoad: twobin / reagál-lusta