2025 m. rugpjūčio 16 d.Lietuvių

Pagerinkite savo React aplikacijų pradinį įkrovimo laiką ir našumą naudodami „lazy loading“ ir komponentų kodo išskaidymą. Išmokite praktinių metodų ir geriausių praktikų.

React „Lazy Loading“: Komponentų Kodo Išskaidymas Optimizuotam Našumui

Šiuolaikiniame sparčiame skaitmeniniame pasaulyje svetainės našumas yra svarbiausias. Vartotojai tikisi greito rezultato, o lėtas įkrovimo laikas gali sukelti nusivylimą, apleistus pirkinių krepšelius ir neigiamą prekės ženklo įvaizdį. React aplikacijoms našumo optimizavimas yra labai svarbus siekiant užtikrinti sklandžią ir patrauklią vartotojo patirtį. Viena galinga technika tai pasiekti yra „lazy loading“ (atidėtas įkėlimas) su komponentų kodo išskaidymu.

Kas yra „Lazy Loading“ ir Kodo Išskaidymas?

„Lazy loading“ (atidėtas įkėlimas) yra technika, kai resursai, tokie kaip paveikslėliai, scenarijai ir komponentai, yra įkeliami tik tada, kai jų prireikia, o ne visi iš karto per pradinį puslapio įkrovimą. Tai žymiai sumažina duomenų, kuriuos reikia atsisiųsti ir apdoroti iš anksto, kiekį, todėl pradinis įkrovimo laikas sutrumpėja, o suvokiamas našumas pagerėja.

Kodo išskaidymas yra procesas, kurio metu jūsų aplikacijos kodas padalijamas į mažesnes, lengviau valdomas dalis (arba paketus). Tai leidžia naršyklei atsisiųsti tik pradiniam vaizdui reikalingą kodą, atidedant kito kodo įkėlimą, kol jo iš tikrųjų prireiks. „Lazy loading“ naudoja kodo išskaidymą, kad įkeltų konkrečius komponentus tik tada, kai jie bus atvaizduojami.

Kodėl Naudoti „Lazy Loading“ ir Kodo Išskaidymą React Aplikacijose?

Štai kodėl turėtumėte apsvarstyti „lazy loading“ ir kodo išskaidymo integravimą į savo React projektus:

Greitesnis pradinis įkrovimo laikas: Iš pradžių įkeliant tik esminius komponentus, galite žymiai sutrumpinti laiką, per kurį puslapis tampa interaktyvus. Tai ypač naudinga vartotojams, turintiems lėtą interneto ryšį arba naudojantiems mobiliuosius įrenginius.
Sumažintas paketo dydis: Kodo išskaidymas sumažina pradinio JavaScript paketo dydį, todėl atsisiuntimo ir apdorojimo laikas sutrumpėja.
Geresnė vartotojo patirtis: Greičiau įsikraunanti svetainė suteikia sklandesnę ir malonesnę vartotojo patirtį, o tai lemia didesnį įsitraukimą ir konversijų skaičių.
Geresnis našumas silpnesniuose įrenginiuose: „Lazy loading“ gali žymiai pagerinti našumą įrenginiuose su ribota apdorojimo galia ir atmintimi, nes jiems nereikia iš anksto įkelti ir apdoroti visos aplikacijos.
SEO nauda: Paieškos sistemos teikia pirmenybę svetainėms su greitesniu įkrovimo laiku, todėl „lazy loading“ įdiegimas gali teigiamai paveikti jūsų pozicijas paieškos sistemose.

Kaip Įdiegti „Lazy Loading“ React Aplikacijoje

React turi integruotą „lazy loading“ palaikymą naudojant React.lazy ir Suspense komponentus. Štai žingsnis po žingsnio vadovas:

1. Naudojant React.lazy()

React.lazy() leidžia dinamiškai importuoti komponentus, efektyviai išskaidant jūsų kodą į atskiras dalis. Ji priima funkciją, kuri kviečia import(), grąžinantį „Promise“, kuris išsisprendžia į komponentą.


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

Šiame pavyzdyje MyComponent bus įkeltas tik tada, kai jis bus atvaizduojamas.

2. Apgaubimas su <Suspense>

Kadangi React.lazy() naudoja dinamiškus importus, kurie yra asinchroniški, jums reikia apgaubti atidėtai įkeliamą komponentą <Suspense> komponentu. <Suspense> komponentas leidžia jums rodyti atsarginę vartotojo sąsają (pvz., įkrovimo indikatorių), kol komponentas yra įkeliamas.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Kraunama...

}>
      
    
  );
}

Šiame pavyzdyje pranešimas Kraunama... bus rodomas, kol MyComponent bus įkeliamas. Kai komponentas bus įkeltas, jis pakeis atsarginę vartotojo sąsają.

3. Praktinis Pavyzdys: Didelės Paveikslėlių Galerijos Atidėtas Įkėlimas

Apsvarstykime scenarijų, kai turite didelę paveikslėlių galeriją. Visų paveikslėlių įkėlimas vienu metu gali smarkiai paveikti našumą. Štai kaip galite atidėtai įkelti paveikslėlius naudodami React.lazy() ir <Suspense>:


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Paveikslėlis 1' },
    { id: 2, src: 'image2.jpg', alt: 'Paveikslėlis 2' },
    { id: 3, src: 'image3.jpg', alt: 'Paveikslėlis 3' },
    // ... daugiau paveikslėlių
  ];

  return (
    
      {images.map(image => (
        Kraunamas paveikslėlis...}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Ir Image.js komponentas:


import React from 'react';

const Image = ({ src, alt }) => {
  return ;
};

export default Image;

Šiame pavyzdyje kiekvienas paveikslėlis yra apgaubtas <Suspense> komponentu, todėl kiekvienam paveikslėliui bus rodomas įkrovimo pranešimas, kol jis bus įkeliamas. Tai neleidžia blokuoti viso puslapio, kol paveikslėliai yra atsiunčiami.

Pažangesnės Technikos ir Svarstymai

1. Klaidų Ribos (Error Boundaries)

Naudojant „lazy loading“, svarbu tvarkyti galimas klaidas, kurios gali įvykti įkrovimo proceso metu. Klaidų ribos (Error Boundaries) gali būti naudojamos šioms klaidoms pagauti ir parodyti atsarginę vartotojo sąsają. Galite sukurti klaidų ribos komponentą taip:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Atnaujinkite būseną, kad kitas atvaizdavimas parodytų atsarginę UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Taip pat galite registruoti klaidą klaidų pranešimo tarnyboje
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Galite atvaizduoti bet kokią pasirinktinę atsarginę UI
      return Kažkas nutiko negerai.;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Tada apgaubkite <Suspense> komponentą su <ErrorBoundary>:



  Kraunama...}>

Jei įvyksta klaida kraunant MyComponent, <ErrorBoundary> ją pagaus ir parodys atsarginę vartotojo sąsają.

2. Serverio Pusės Atvaizdavimas (SSR) ir „Lazy Loading“

„Lazy loading“ taip pat galima naudoti kartu su serverio pusės atvaizdavimu (SSR), siekiant pagerinti pradinį jūsų aplikacijos įkrovimo laiką. Tačiau tam reikalinga papildoma konfigūracija. Reikia užtikrinti, kad serveris teisingai tvarkytų dinaminius importus ir kad atidėtai įkeliami komponentai būtų tinkamai „hidratuoti“ kliento pusėje.

Įrankiai, tokie kaip Next.js ir Gatsby.js, siūlo integruotą palaikymą „lazy loading“ ir kodo išskaidymui SSR aplinkose, todėl procesas tampa daug paprastesnis.

3. Atidėtai Įkeliamų Komponentų Išankstinis Įkėlimas

Kai kuriais atvejais galite norėti iš anksto įkelti atidėtai įkeliamą komponentą, prieš jam iš tikrųjų prireikiant. Tai gali būti naudinga komponentams, kurie greičiausiai bus greitai atvaizduoti, pavyzdžiui, komponentams, esantiems žemiau matomos ekrano dalies, bet į kuriuos tikėtina, kad bus nuslinkta. Komponentą galite iš anksto įkelti rankiniu būdu iškviesdami import() funkciją:


import('./MyComponent'); // Išankstinis MyComponent įkėlimas

Tai pradės komponento įkėlimą fone, todėl jis bus pasiekiamas greičiau, kai bus faktiškai atvaizduojamas.

4. Dinaminiai Importai su „Webpack Magic Comments“

Webpack „magiškieji komentarai“ suteikia galimybę pritaikyti sugeneruotų kodo dalių pavadinimus. Tai gali būti naudinga derinant ir analizuojant jūsų aplikacijos paketų struktūrą. Pavyzdžiui:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Tai sukurs kodo dalį pavadinimu „my-component.js“ (ar panašiai) vietoj bendrinio pavadinimo.

5. Kaip Išvengti Dažniausių Klaidų

Perdėtas išskaidymas: Kodo išskaidymas į per daug mažų dalių iš tikrųjų gali sumažinti našumą dėl daugybės tinklo užklausų pridėtinių išlaidų. Raskite balansą, kuris tinka jūsų aplikacijai.
Neteisingas Suspense išdėstymas: Įsitikinkite, kad jūsų <Suspense> ribos yra tinkamai išdėstytos, kad būtų užtikrinta gera vartotojo patirtis. Venkite, jei įmanoma, apgaubti ištisus puslapius <Suspense>.
Klaidų ribų (Error Boundaries) pamiršimas: Visada naudokite klaidų ribas, kad tvarkytumėte galimas klaidas atidėto įkėlimo metu.

Realaus Pasaulio Pavyzdžiai ir Panaudojimo Atvejai

„Lazy loading“ gali būti taikomas įvairiems scenarijams, siekiant pagerinti React aplikacijų našumą. Štai keletas pavyzdžių:

Elektroninės prekybos svetainės: Atidėtas produktų paveikslėlių, vaizdo įrašų ir išsamių produktų aprašymų įkėlimas gali žymiai pagerinti produktų puslapių pradinį įkrovimo laiką.
Tinklaraščiai ir naujienų svetainės: Atidėtas paveikslėlių, įterptų vaizdo įrašų ir komentarų skilčių įkėlimas gali pagerinti skaitymo patirtį ir sumažinti atmetimo rodiklį.
Valdymo skydeliai ir administravimo panelės: Atidėtas sudėtingų diagramų, grafikų ir duomenų lentelių įkėlimas gali pagerinti valdymo skydelių ir administravimo panelių reakcijos laiką.
Vieno puslapio aplikacijos (SPA): Atidėtas maršrutų ir komponentų įkėlimas gali sumažinti SPA pradinį įkrovimo laiką ir pagerinti bendrą vartotojo patirtį.
Internacionalizuotos aplikacijos: Lokalėms specifinių resursų (teksto, paveikslėlių ir kt.) įkėlimas tik tada, kai jų reikia vartotojo kalbai. Pavyzdžiui, vokiškų vertimų įkėlimas vartotojui Vokietijoje ir ispaniškų vertimų įkėlimas vartotojui Ispanijoje.

Pavyzdys: Tarptautinė elektroninės prekybos svetainė

Įsivaizduokite elektroninės prekybos svetainę, parduodančią produktus visame pasaulyje. Skirtingos šalys gali turėti skirtingas valiutas, kalbas ir produktų katalogus. Užuot iš anksto įkėlus visus duomenis kiekvienai šaliai, galite naudoti „lazy loading“, kad įkeltumėte duomenis, būdingus vartotojo vietai, tik tada, kai jis apsilanko svetainėje.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcija, nustatanti vartotojo šalį

  return (
    Kraunamas turinys jūsų regionui...}>
      
      
    
  );
}

Išvada

„Lazy loading“ ir komponentų kodo išskaidymas yra galingos technikos, skirtos optimizuoti React aplikacijų našumą. Įkeldami komponentus tik tada, kai jų prireikia, galite žymiai sutrumpinti pradinį įkrovimo laiką, pagerinti vartotojo patirtį ir sustiprinti savo SEO. React integruoti React.lazy() ir <Suspense> komponentai leidžia lengvai įdiegti „lazy loading“ jūsų projektuose. Pasinaudokite šiomis technikomis, kad sukurtumėte greitesnes, jautresnes ir patrauklesnes interneto aplikacijas pasaulinei auditorijai.

Įgyvendindami „lazy loading“, visada atsižvelkite į vartotojo patirtį. Pateikite informatyvias atsargines vartotojo sąsajas, tinkamai tvarkykite galimas klaidas ir atidžiai analizuokite savo aplikacijos našumą, kad įsitikintumėte, jog pasiekiate norimus rezultatus. Nebijokite eksperimentuoti su skirtingais požiūriais ir rasti geriausią sprendimą pagal savo konkrečius poreikius.