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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Nalaganje...

V tem primeru bo sporočilo Nalaganje... prikazano, medtem ko se MyComponent nalaga. Ko je komponenta naložena, bo zamenjala nadomestni uporabniški vmesnik.

3. Praktičen primer: Leno nalaganje velike galerije slik

Poglejmo si scenarij, kjer imate veliko galerijo slik. Nalaganje vseh slik naenkrat lahko znatno vpliva na delovanje. Tukaj je primer, kako lahko slike naložite leno z uporabo React.lazy() in <Suspense>:

import React, { Suspense } from 'react';

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

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Slika 1' },
    { id: 2, src: 'image2.jpg', alt: 'Slika 2' },
    { id: 3, src: 'image3.jpg', alt: 'Slika 3' },
    // ... več slik
  ];

  return (
    

      {images.map(image => (
        Nalaganje slike...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

In komponenta Image.js:

import React from 'react';

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

export default Image;

V tem primeru je vsaka slika ovita v komponento <Suspense>, zato se bo za vsako sliko med nalaganjem prikazalo sporočilo o nalaganju. To preprečuje, da bi se celotna stran blokirala med prenosom slik.

Napredne tehnike in premisleki

1. Meje napak (Error Boundaries)

Pri uporabi lenega nalaganja je pomembno obravnavati morebitne napake, ki se lahko pojavijo med postopkom nalaganja. Za lovljenje teh napak in prikaz nadomestnega uporabniškega vmesnika lahko uporabite meje napak. Komponento za mejo napak lahko ustvarite takole:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Posodobi stanje, da bo naslednje renderiranje prikazalo nadomestni UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Napako lahko tudi zabeležite v storitev za poročanje o napakah
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Prikažete lahko katerikoli nadomestni UI po meri
      return 
Prišlo je do napake.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Nato ovijte komponento <Suspense> z <ErrorBoundary>:

  Nalaganje...}>
    
  

Če pride do napake med nalaganjem komponente MyComponent, jo bo <ErrorBoundary> ujel in prikazal nadomestni uporabniški vmesnik.

2. Prikazovanje na strani strežnika (SSR) in leno nalaganje

Leno nalaganje se lahko uporablja tudi v povezavi s prikazovanjem na strani strežnika (SSR) za izboljšanje začetnega časa nalaganja vaše aplikacije. Vendar pa to zahteva nekaj dodatne konfiguracije. Zagotoviti morate, da strežnik pravilno obravnava dinamične uvoze in da so komponente, naložene leno, pravilno hidrirane na strani odjemalca.

Orodja, kot sta Next.js in Gatsby.js, ponujajo vgrajeno podporo za leno nalaganje in razdeljevanje kode v SSR okoljih, kar postopek močno olajša.

3. Prednalaganje komponent, ki se nalagajo leno

V nekaterih primerih boste morda želeli prednaložiti komponento, ki se nalaga leno, preden je dejansko potrebna. To je lahko koristno za komponente, ki bodo verjetno kmalu renderirane, kot so komponente pod pregibom strani, za katere je verjetno, da se bo uporabnik pomaknil do njih. Komponento lahko prednaložite z ročnim klicem funkcije import():

import('./MyComponent'); // Prednaloži MyComponent

S tem se bo komponenta začela nalagati v ozadju, tako da bo na voljo hitreje, ko bo dejansko renderirana.

4. Dinamični uvozi z Webpack "čarobnimi komentarji"

Webpackovi "čarobni komentarji" omogočajo prilagajanje imen generiranih kosov kode. To je lahko koristno za odpravljanje napak in analizo strukture svežnjev vaše aplikacije. Na primer:

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

To bo ustvarilo kos kode z imenom "my-component.js" (ali podobnim) namesto generičnega imena.

5. Izogibanje pogostim pastem

• Prekomerno razdeljevanje: Razdeljevanje kode na preveč majhnih kosov lahko dejansko poslabša delovanje zaradi dodatnih stroškov večkratnih omrežnih zahtev. Poiščite ravnovesje, ki ustreza vaši aplikaciji.
• Nepravilna postavitev Suspense: Zagotovite, da so vaše meje <Suspense> ustrezno postavljene za dobro uporabniško izkušnjo. Če je mogoče, se izogibajte ovijanju celotnih strani v <Suspense>.
• Pozabljanje na meje napak: Vedno uporabljajte meje napak za obravnavanje morebitnih napak med lenim nalaganjem.

Primeri in primeri uporabe iz resničnega sveta

Leno nalaganje se lahko uporablja v širokem naboru scenarijev za izboljšanje delovanja React aplikacij. Tukaj je nekaj primerov:

• Spletne trgovine: Leno nalaganje slik izdelkov, videoposnetkov in podrobnih opisov izdelkov lahko znatno izboljša začetni čas nalaganja strani z izdelki.
• Blogi in novičarske spletne strani: Leno nalaganje slik, vdelanih videoposnetkov in razdelkov s komentarji lahko izboljša bralno izkušnjo in zmanjša stopnjo obiskov ene strani.
• Nadzorne plošče in administrativni paneli: Leno nalaganje kompleksnih grafov, diagramov in podatkovnih tabel lahko izboljša odzivnost nadzornih plošč in administrativnih panelov.
• Aplikacije na eni strani (SPA): Leno nalaganje poti (routes) in komponent lahko zmanjša začetni čas nalaganja SPA in izboljša celotno uporabniško izkušnjo.
• Internacionalizirane aplikacije: Nalaganje virov, specifičnih za lokalizacijo (besedilo, slike itd.), samo takrat, ko so potrebni za jezik uporabnika. Na primer, nalaganje nemških prevodov za uporabnika v Nemčiji in španskih prevodov za uporabnika v Španiji.

Primer: Mednarodna spletna trgovina

Predstavljajte si spletno trgovino, ki prodaja izdelke po vsem svetu. Različne države imajo lahko različne valute, jezike in kataloge izdelkov. Namesto da bi naložili vse podatke za vsako državo vnaprej, lahko uporabite leno nalaganje za nalaganje podatkov, specifičnih za lokacijo uporabnika, šele ko ta obišče stran.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcija za določitev države uporabnika

  return (
    Nalaganje vsebine za vašo regijo...}>
      
      
    
  );
}

Zaključek

Leno nalaganje in razdeljevanje kode komponent sta močni tehniki za optimizacijo delovanja React aplikacij. Z nalaganjem komponent šele takrat, ko so potrebne, lahko znatno skrajšate začetni čas nalaganja, izboljšate uporabniško izkušnjo in izboljšate svoj SEO. Vgrajeni komponenti Reacta React.lazy() in <Suspense> olajšata implementacijo lenega nalaganja v vaših projektih. Uporabite te tehnike za gradnjo hitrejših, bolj odzivnih in privlačnejših spletnih aplikacij za globalno občinstvo.

Ne pozabite vedno upoštevati uporabniške izkušnje pri implementaciji lenega nalaganja. Zagotovite informativne nadomestne uporabniške vmesnike, elegantno obravnavajte morebitne napake in skrbno analizirajte delovanje vaše aplikacije, da zagotovite doseganje želenih rezultatov. Ne bojte se eksperimentirati z različnimi pristopi in najti najboljšo rešitev za vaše specifične potrebe.