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-appaz alábbi parancsokkal kell inicializálnunk a React alkalmazást :
create-react-app lazydemocd lazydemonpm run startEz eltarthat néhány percig, 3000mire inicializálja és alapértelmezés szerint megnyitja a reakcióalkalmazást a böngésző portjában.
create-react-apptelepí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.jsbelső srcmappában a projekthez. Nemrég másoltam be a jsonválaszt erről a JSONhelyő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.jsfájl tartalmát az alábbi kóddal:
Itt vagyunk, egyszerűen csak egy listát postsazok titleés body. Néhány egyszerű CSSmó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-lazyloadMost frissítsük a App.jsfájlt importálással és alkalmazással lazyload.
A használat react-lazyloadmeglehető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 placeholder component
set thectiveand 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 loadingaz 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 Postkomponensünknek az alábbiak szerint kell kinéznie:
Lorem Picsum url formátum
//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 scrolla listát, inspect element openhogy 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 !!!
Az itt látható LazyLoad kép nem a legjobb felhasználási eset, mivel a LazyLoad komponens már kezeli. De a technika nagyon hasznos lehet más olyan esetekben, amikor sok képet kell bemutatnunk. Próbálkozzon a LazyLoad on Post összetevő letiltásával, de a LazyLoad képet őrizze meg, láthatja annak hatását.
Github: //github.com/nowshad-sust/lazydemo
React LazyLoad: twobin / reagál-lusta