Vodnik za leno nalaganje z React

Predstavitev

Ko razvijamo velike aplikacije React, običajno uporabljamo veliko slik in videoposnetkov, nameščamo pakete/knjižnice tretjih oseb, kličemo API in počnemo vrsto drugih stvari. To seveda poveča čas, ki je potreben za nalaganje naše aplikacije, rezultat pa je velika velikost svežnja, kar prispeva k slabi uporabniški izkušnji. To je kje leno nalaganje pride na svoje mesto. Omogoča nam nalaganje vsebine ravno pravi čas, tik preden se prikaže v aplikaciji.

Lahko se izognemo vnaprejšnjemu nalaganju vsebine, ko je še izven vidnega polja, in osredotočimo vse vire na vsebino, ki je v pogledu.

V tem priročniku si bomo ogledali, kako ga uporabljati React.lazy() in React.Suspense za implementacijo lenobnega nalaganja in funkcionalnosti delitve kode, ki nam omogoča obdelavo delitve kode brez potrebe po namestitvi dodatnih knjižnic.

Kaj je leno nalaganje?

Ko zaženemo spletno aplikacijo React, običajno združi celotno aplikacijo naenkrat, pri čemer naloži vse, vključno s celotnimi stranmi spletne aplikacije, slikami, vsebino in še veliko več za nas, kar lahko povzroči počasno nalaganje in splošno slabo delovanje, odvisno od velikost vsebine in internetna pasovna širina v tem trenutku.

Lažno nakladanje nam omogoča nalaganje določenih komponent le, ko so potrebne. Praviloma tudi izvajamo delitev kode v logične komponente, ki jih je mogoče leno naložiti z vsebino.

Na primer, če imamo stran nadzorne plošče, ki ob kliku prikaže veliko informacij iz različnih virov, je vedno najbolje, da te komponente in strani pustimo leno naložene, tako da se naložijo le, ko jih potrebuje ali zahteva uporabnik.

Opomba: Postopek razdelitve velikega svežnja kode v več svežnjev, ki jih je mogoče dinamično naložiti s splošnim ciljem izogibanja težavam z zmogljivostjo, povezanih s prevelikimi svežnji, je znan kot delitev kode. To dosežemo brez zmanjšanja količine kode v naši aplikaciji.

Če povzamemo, leno nalaganje nam omogoča upodabljanje komponent ali elementov na zahtevo, zaradi česar je naša aplikacija učinkovitejša in zagotavlja boljšo uporabniško izkušnjo.

Opomba: Enostranske aplikacije (SPA) so zasnovani tako, da vsebujejo vse strani in vsebino znotraj enega dokumenta/strani. Zato pride leno nalaganje še posebej prav pri razvoju SPA.

Kako implementirati leno nalaganje v React

Doslej smo videli, kaj je odloženo nalaganje in zakaj ga je pomembno izvajati. Zdaj pa poglejmo, kako ga lahko implementiramo v naše aplikacije React z uporabo dveh funkcij React, ki olajšata implementacijo delitve kode in lenega nalaganja – React.lazy() in Reagiraj. Napetost.

React.lazy() je funkcija, ki nam omogoča upodabljanje dinamičnega uvoza na enak način kot običajne komponente. Uporaba dinamičnega uvoza poleg React.lazy() nam bo omogočil uvoz komponente tik preden se upodobi na zaslonu. Pomembno je omeniti, da React.lazy() sprejme funkcijo kot argument – ​​ta funkcija mora poklicati dinamiko import() v svojem telesu.

React.Suspense nam omogoča določitev nadomestne možnosti Prop ki sprejme nadomestno vsebino, ki bi se uporabila kot a indikator nalaganja medtem ko se vse lene komponente naložijo.

Začnimo z ogledom, kako lahko implementiramo leno nalaganje v naših uvoženih komponentah in nato, kako ga lahko implementiramo v naših poteh, tako da se strani ne naložijo, dokler se ne pomaknemo do njih.

Začetek

Recimo, da imamo svojo aplikacijo React in smo uvozili About komponento v Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Zdaj lahko implementiramo leno nalaganje z uporabo React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Opomba: React.lazy() uporabljen na ta način vrne a Promise predmet. Ta obljuba se razreši v modul, ki vsebuje komponento React, ki jo želimo leno naložiti default izvoz.

Izvedli smo leno nalaganje z uporabo React.lazy(), vendar bo zgornja koda vedno vrgla Napaka češ da je naš “React component suspended while rendering, but no fallback UI was specified”. To lahko popravite tako, da komponento ovijete z React.Suspenseje fallbackz in pritrditev rezervnih rekvizitov, kot smo razložili prej:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Opomba: Nadomestni rek lahko prikaže komponento, preden se naloži izvirna vsebina.

Poleg tega se lahko odločimo za uničenje uvoz Reacta, da bo koda čistejša in berljivejša:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Doslej smo videli, kako implementirati odloženo nalaganje v naše uvožene komponente. Zdaj pa poglejmo, kako to implementirati v naše poti med usmerjanjem z usmerjevalnikom React.

Kako implementirati leno nalaganje z usmerjevalnikom React

Leno usmerjanje je pravzaprav dobra praksa za poti, ki imajo veliko vsebine in lahko upočasnijo čas nalaganja vaše aplikacije. Implementacija lenobnega nalaganja za poti React je skoraj identična tistemu, kar smo naredili prej, ko smo lenobno nalagali dinamično uvožene komponente.

Leno nalaganje React routes se nanaša na dinamično uvažanje komponente samo, ko je to potrebno. Recimo, da imamo v naši aplikaciji dve poti in dve komponenti, ki predstavljata te poti. Če omenjeno usmerjanje implementiramo na naslednji način, se bo vsaka komponenta naložila šele, ko bomo navigirali do ustrezne poti:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

zaključek

V tem priročniku smo izvedeli, kaj sta odloženo nalaganje in delitev kode, kako ju implementirati in da so najboljše mesto za implementacijo odloženega nalaganja poti. S tem se izognete upodabljanju celotne strani hkrati, kar lahko povzroči počasnejši čas nalaganja pri delu s stranmi z veliko vsebino.