React: Leni nalaganje: Povečanje zmogljivosti z delitvijo kode komponente

V današnjem spletnem razvoju je zmogljivost najpomembnejša. Uporabniki pričakujejo hiter čas nalaganja in gladke interakcije. Veliki JavaScript paketi, zlasti v kompleksnih aplikacijah React, lahko znatno vplivajo na začetne čase nalaganja in splošno uporabniško izkušnjo. Ena od učinkovitih tehnik za reševanje tega problema je leno nalaganje, zlasti delitev kode komponente. Ta članek ponuja obsežen vodnik za razumevanje in implementacijo lenega nalaganja v Reactu z uporabo React.lazy in Suspense.

Kaj je leno nalaganje in delitev kode?

Leno nalaganje, znano tudi kot nalaganje na zahtevo, je tehnika, ki preloži nalaganje virov (v našem primeru komponent React), dokler jih dejansko ne potrebujemo. Namesto da bi naložili vso kodo aplikacije vnaprej, se naložijo samo bistveni deli, preostala koda pa se naloži asinhrono, ko uporabnik krmari do določene poti ali komunicira z določeno komponento. To znatno zmanjša začetno velikost paketa in izboljša čas do interaktivnosti (TTI).

Delitev kode je postopek razdelitve kode vaše aplikacije na manjše, bolj obvladljive dele (pakete). Te pakete je mogoče nato naložiti neodvisno in na zahtevo. Leno nalaganje v Reactu izkorišča delitev kode za nalaganje komponent samo, ko so potrebne.

Prednosti lenega nalaganja in delitve kode

• Izboljšan začetni čas nalaganja: Z zmanjšanjem začetne velikosti paketa brskalnik prenese in razčleni manj JavaScript vnaprej, kar povzroči hitrejše nalaganje strani. To je še posebej pomembno za uporabnike s počasnejšimi omrežnimi povezavami ali napravami.
• Izboljšana uporabniška izkušnja: Hitrejši čas nalaganja vodi do bolj odzivne in prijetne uporabniške izkušnje, zmanjšuje stopnjo odboja in povečuje angažiranost uporabnikov.
• Zmanjšana poraba virov: Nalaganje samo potrebne kode zmanjša pomnilniški odtis aplikacije, kar je še posebej koristno za mobilne naprave.
• Boljša SEO: Iskalniki dajejo prednost spletnim mestom s hitrim časom nalaganja, kar lahko izboljša uvrstitev vašega spletnega mesta v iskalnikih.

Implementacija lenega nalaganja v Reactu z React.lazy in Suspense

React ponuja vgrajen mehanizem za leno nalaganje komponent z uporabo React.lazy in Suspense. React.lazy vam omogoča dinamično uvoz komponente, medtem ko Suspense ponuja način za prikaz nadomestnega uporabniškega vmesnika, medtem ko se komponenta nalaga.

1. korak: Dinamični uvozi z React.lazy

React.lazy sprejme funkcijo, ki kliče import(). Funkcija import() je dinamični uvoz, ki vrne obljubo (Promise), ki se razreši v modul, ki vsebuje komponento, ki jo želite leno naložiti.

import React, { lazy, Suspense } from 'react';

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

V tem primeru se MyComponent ne naloži, dokler se ne upodobi. Izjava import('./MyComponent') dinamično uvozi komponento iz datoteke ./MyComponent. Upoštevajte, da je pot relativna na trenutno datoteko.

2. korak: Uporaba Suspense za obravnavo stanj nalaganja

Ker leno nalaganje vključuje asinhrono nalaganje komponent, potrebujete način za obravnavo stanja nalaganja in prikaz nadomestnega uporabniškega vmesnika, medtem ko se komponenta pridobiva. Tu pride v poštev Suspense. Suspense je komponenta React, ki vam omogoča, da "začasno ustavite" upodabljanje njenih otrok, dokler niso pripravljeni. Sprejme rekvizit fallback, ki določa uporabniški vmesnik, ki se upodablja med nalaganjem otrok.

import React, { lazy, Suspense } from 'react';

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

function App() {
  return (
    Loading...

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    
      Loading...