M

MLOG

Magyar

Gyorsabb kezdeti betöltési idők és jobb teljesítmény a React alkalmazásokban a lazy loading és a komponens kód-felosztás segítségével. Ismerje meg a gyakorlati technikákat és a legjobb gyakorlatokat.

React Lazy Loading: Komponens kód-felosztás az optimalizált teljesítményért

A mai rohanó digitális világban a weboldalak teljesítménye kulcsfontosságú. A felhasználók azonnali kielégülést várnak, és a lassú betöltési idők frusztrációhoz, elhagyott kosarakhoz és negatív márkaképhez vezethetnek. React alkalmazások esetében a teljesítmény optimalizálása elengedhetetlen a zökkenőmentes és lebilincselő felhasználói élmény biztosításához. Ennek elérésére egy hatékony technika a lazy loading (lusta betöltés) komponens kód-felosztással.

Mi az a Lazy Loading és a kód-felosztás?

A lazy loading (lusta betöltés) egy olyan technika, amely során az erőforrások, mint például a képek, szkriptek és komponensek, csak akkor töltődnek be, amikor szükség van rájuk, nem pedig mind egyszerre a kezdeti oldalbetöltéskor. Ez jelentősen csökkenti az előre letöltendő és feldolgozandó adatmennyiséget, ami gyorsabb kezdeti betöltési időt és jobb érzékelt teljesítményt eredményez.

A kód-felosztás (code splitting) az a folyamat, amely során az alkalmazás kódját kisebb, jobban kezelhető darabokra (vagy csomagokra) bontjuk. Ez lehetővé teszi a böngésző számára, hogy csak a kezdeti nézethez szükséges kódot töltse le, a többi kód betöltését pedig elhalassza addig, amíg arra ténylegesen szükség nem lesz. A lazy loading a kód-felosztást használja ki arra, hogy bizonyos komponenseket csak akkor töltsön be, amikor azok renderelésre kerülnek.

Miért használjunk Lazy Loadingot és kód-felosztást Reactben?

Íme, miért érdemes beépíteni a lazy loadingot és a kód-felosztást a React projektjeibe:

Hogyan valósítsuk meg a Lazy Loadingot Reactben

A React beépített támogatást nyújt a lazy loadinghoz a React.lazy és a Suspense komponensek segítségével. Íme egy lépésről-lépésre útmutató:

1. A React.lazy() használata

A React.lazy() lehetővé teszi a komponensek dinamikus importálását, hatékonyan felosztva a kódot különálló darabokra. Egy olyan függvényt fogad el, amely meghívja az import()-ot, ami egy Promise-t ad vissza, amely a komponensre oldódik fel.


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

Ebben a példában a MyComponent csak akkor fog betöltődni, amikor renderelésre kerül.

2. Becsomagolás <Suspense>-be

Mivel a React.lazy() dinamikus importokat használ, amelyek aszinkronok, a lustán betöltött komponenst be kell csomagolni egy <Suspense> komponensbe. A <Suspense> komponens lehetővé teszi egy tartalék UI (pl. egy betöltésjelző) megjelenítését, amíg a komponens betöltődik.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...
}> ); }

Ebben a példában a Loading... (Betöltés...) üzenet fog megjelenni, amíg a MyComponent betöltődik. Amint a komponens betöltődött, lecseréli a tartalék UI-t.

3. Gyakorlati példa: Egy nagy képgaléria lusta betöltése

Vegyünk egy olyan esetet, ahol egy nagy képgalériánk van. Az összes kép egyszerre történő betöltése jelentősen ronthatja a teljesítményt. Így töltheti be lustán a képeket a React.lazy() és a <Suspense> segítségével:


import React, { Suspense } from 'react';

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

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

  return (
    

      {images.map(image => (
        Loading image...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

És az Image.js komponens:


import React from 'react';

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

export default Image;

Ebben a példában minden kép egy <Suspense> komponensbe van csomagolva, így minden képhez egy betöltési üzenet jelenik meg, amíg az betöltődik. Ez megakadályozza, hogy az egész oldal blokkolva legyen, amíg a képek letöltődnek.

Haladó technikák és megfontolások

1. Hibahatárok (Error Boundaries)

A lazy loading használatakor fontos kezelni a betöltési folyamat során esetlegesen felmerülő hibákat. A hibahatárok (Error Boundaries) használhatók ezen hibák elkapására és egy tartalék UI megjelenítésére. Létrehozhat egy hibahatár komponenst így:


import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Ezután csomagolja be a <Suspense> komponenst az <ErrorBoundary>-vel:



  Loading...}>

Ha hiba történik a MyComponent betöltése közben, az <ErrorBoundary> elkapja azt és megjeleníti a tartalék UI-t.

2. Szerveroldali renderelés (SSR) és Lazy Loading

A lazy loading szerveroldali rendereléssel (SSR) együtt is használható az alkalmazás kezdeti betöltési idejének javítására. Azonban ez némi további konfigurációt igényel. Biztosítania kell, hogy a szerver helyesen tudja kezelni a dinamikus importokat, és hogy a lustán betöltött komponensek megfelelően hidratálódjanak a kliens oldalon.

Az olyan eszközök, mint a Next.js és a Gatsby.js, beépített támogatást nyújtanak a lazy loadinghoz és a kód-felosztáshoz SSR környezetekben, ami jelentősen megkönnyíti a folyamatot.

3. Lustán betöltött komponensek előtöltése

Bizonyos esetekben előfordulhat, hogy előre szeretne betölteni egy lustán betöltött komponenst, mielőtt arra ténylegesen szükség lenne. Ez hasznos lehet olyan komponensek esetében, amelyek valószínűleg hamarosan renderelésre kerülnek, például olyan komponensek, amelyek az oldal alján helyezkednek el, de valószínű, hogy a felhasználó odagörget. Egy komponenst előtölthet az import() függvény manuális meghívásával:


import('./MyComponent'); // Preload MyComponent

Ez elkezdi a komponens háttérben történő betöltését, így gyorsabban elérhető lesz, amikor ténylegesen renderelésre kerül.

4. Dinamikus importok Webpack "mágikus kommentekkel"

A Webpack "mágikus kommentjei" lehetővé teszik a generált kód-darabok nevének testreszabását. Ez hasznos lehet a hibakereséshez és az alkalmazás csomagszerkezetének elemzéséhez. Például:


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

Ez egy "my-component.js" (vagy hasonló) nevű kód-darabot hoz létre egy általános név helyett.

5. Gyakori buktatók elkerülése

Valós példák és felhasználási esetek

A lazy loading széles körben alkalmazható a React alkalmazások teljesítményének javítására. Íme néhány példa:

Példa: Nemzetközi e-kereskedelmi weboldal

Képzeljen el egy e-kereskedelmi weboldalt, amely globálisan értékesít termékeket. Különböző országoknak különböző pénznemeik, nyelveik és termékkatalógusaik lehetnek. Ahelyett, hogy minden ország adatait előre betöltenénk, a lazy loading segítségével csak a felhasználó tartózkodási helyének megfelelő adatokat tölthetjük be, amikor meglátogatja az oldalt.


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

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkció a felhasználó országának meghatározására

  return (
    Tartalom betöltése az Ön régiójához...}>
      
      
    
  );
}

Összegzés

A lazy loading és a komponens kód-felosztás hatékony technikák a React alkalmazások teljesítményének optimalizálására. Azzal, hogy a komponenseket csak akkor töltjük be, amikor szükség van rájuk, jelentősen csökkenthetjük a kezdeti betöltési időt, javíthatjuk a felhasználói élményt és a SEO-t. A React beépített React.lazy() és <Suspense> komponensei megkönnyítik a lazy loading megvalósítását a projektjeiben. Használja ezeket a technikákat, hogy gyorsabb, reszponzívabb és lebilincselőbb webalkalmazásokat hozzon létre egy globális közönség számára.

Ne feledje, hogy a lazy loading megvalósításakor mindig vegye figyelembe a felhasználói élményt. Biztosítson informatív tartalék UI-kat, kezelje kecsesen a lehetséges hibákat, és gondosan elemezze az alkalmazás teljesítményét, hogy biztosan elérje a kívánt eredményeket. Ne féljen kísérletezni különböző megközelítésekkel, és megtalálni az Ön specifikus igényeinek leginkább megfelelő megoldást.