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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Načítání...

V tomto příkladu se zpráva Načítání... zobrazí během načítání MyComponent. Jakmile se komponenta načte, nahradí náhradní uživatelské rozhraní.

3. Praktický příklad: Lazy Loading velké galerie obrázků

Představte si scénář, kde máte velkou galerii obrázků. Načítání všech obrázků najednou může výrazně ovlivnit výkon. Zde je postup, jak můžete obrázky lazy loadovat pomocí React.lazy() a <Suspense>:

import React, { Suspense } from 'react';

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

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Obrázek 1' },
    { id: 2, src: 'image2.jpg', alt: 'Obrázek 2' },
    { id: 3, src: 'image3.jpg', alt: 'Obrázek 3' },
    // ... další obrázky
  ];

  return (
    

      {images.map(image => (
        Načítání obrázku...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

A komponenta Image.js:

import React from 'react';

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

export default Image;

V tomto příkladu je každý obrázek zabalen do komponenty <Suspense>, takže se pro každý obrázek zobrazí zpráva o načítání, zatímco se načítá. To zabraňuje zablokování celé stránky během stahování obrázků.

Pokročilé Techniky a Úvahy

1. Hranice chyb

Při použití lazy loading je důležité řešit potenciální chyby, které se mohou vyskytnout během procesu načítání. Hranice chyb lze použít k zachycení těchto chyb a zobrazení náhradního uživatelského rozhraní. Můžete vytvořit komponentu error boundary takto:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Aktualizujte stav, aby se v dalším renderování zobrazilo náhradní uživatelské rozhraní.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Můžete také protokolovat chybu do služby pro hlášení chyb
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Můžete vykreslit jakékoli vlastní náhradní uživatelské rozhraní
      return 
Něco se pokazilo.
;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Potom zabalte komponentu <Suspense> s <ErrorBoundary>:

  Načítání...}>
    
  

Pokud dojde k chybě při načítání MyComponent, <ErrorBoundary> ji zachytí a zobrazí náhradní uživatelské rozhraní.

2. Server-Side Rendering (SSR) a Lazy Loading

Lazy loading lze také použít ve spojení se server-side rendering (SSR) ke zlepšení doby počátečního načítání vaší aplikace. Vyžaduje to však určitou další konfiguraci. Budete muset zajistit, aby server dokázal správně zpracovávat dynamické importy a aby se komponenty načtené metodou lazy loading správně hydratovaly na straně klienta.

Nástroje jako Next.js a Gatsby.js poskytují vestavěnou podporu pro lazy loading a rozdělování kódu v SSR prostředích, což tento proces značně usnadňuje.

3. Preloading komponent načtených metodou Lazy Loading

V některých případech možná budete chtít předem načíst komponentu načtenou metodou lazy loading, než je skutečně potřeba. To může být užitečné pro komponenty, které se pravděpodobně brzy vykreslí, jako jsou komponenty, které jsou umístěny pod záhybem, ale je pravděpodobné, že budou posunuty do zobrazení. Můžete předem načíst komponentu ručním voláním funkce import():

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

Tím se spustí načítání komponenty na pozadí, takže bude k dispozici rychleji, když se skutečně vykreslí.

4. Dynamické importy s komentáři Webpack Magic

„Kouzelné komentáře“ Webpack poskytují způsob, jak přizpůsobit názvy generovaných bloků kódu. To může být užitečné pro ladění a analýzu struktury balíčku vaší aplikace. Například:

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

Tím se vytvoří blok kódu s názvem „my-component.js“ (nebo podobným) místo obecného názvu.

5. Vyhýbání se běžným nástrahám

• Přílišné dělení: Rozdělení kódu do příliš mnoha malých bloků může ve skutečnosti snížit výkon kvůli režii vytváření více síťových požadavků. Najděte rovnováhu, která funguje pro vaši aplikaci.
• Nesprávné umístění Suspense: Ujistěte se, že jsou vaše <Suspense> hranice umístěny vhodně, aby poskytovaly dobrý uživatelský dojem. Je-li to možné, vyhněte se zabalení celých stránek do <Suspense>.
• Zapomenutí hranic chyb: Vždy používejte hranice chyb k řešení potenciálních chyb během lazy loading.

Příklady z reálného světa a případy použití

Lazy loading lze použít v široké škále scénářů ke zlepšení výkonu aplikací React. Zde jsou některé příklady:

• Webové stránky elektronického obchodu: Lazy loading obrázků produktů, videí a podrobných popisů produktů může výrazně zlepšit dobu počátečního načítání stránek produktů.
• Blogy a zpravodajské webové stránky: Lazy loading obrázků, vložených videí a sekcí komentářů může vylepšit zážitek ze čtení a snížit míru opuštění.
• Dashboardy a panely administrace: Lazy loading složitých grafů, grafů a datových tabulek může zlepšit odezvu dashboardů a panelů administrace.
• Single-Page Applications (SPAs): Lazy loading tras a komponent může snížit dobu počátečního načítání SPAs a zlepšit celkový uživatelský dojem.
• Internationalized Applications: Načítání prostředků specifických pro danou lokalitu (text, obrázky atd.) pouze tehdy, když jsou potřebné pro jazyk uživatele. Například načítání německých překladů pro uživatele v Německu a španělských překladů pro uživatele ve Španělsku.

Příklad: Mezinárodní web elektronického obchodu

Představte si web elektronického obchodu, který prodává produkty celosvětově. Různé země mohou mít různé měny, jazyky a katalogy produktů. Namísto načítání všech dat pro každou zemi předem můžete použít lazy loading k načtení dat specifických pro polohu uživatele pouze v okamžiku, kdy navštíví stránku.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkce pro určení země uživatele

  return (
    Načítání obsahu pro váš region...}>
      
      
    
  );
}

Závěr

Lazy loading a rozdělování kódu komponent jsou výkonné techniky pro optimalizaci výkonu aplikací React. Načtením komponent pouze tehdy, když jsou potřeba, můžete výrazně snížit dobu počátečního načítání, zlepšit uživatelský dojem a vylepšit své SEO. Vestavěné komponenty React.lazy() a <Suspense> od Reactu usnadňují implementaci lazy loading ve vašich projektech. Přijměte tyto techniky k vytváření rychlejších, responsivnějších a poutavějších webových aplikací pro globální publikum.

Nezapomeňte při implementaci lazy loading vždy zvážit uživatelskou zkušenost. Poskytněte informativní náhradní uživatelská rozhraní, elegantně řešte potenciální chyby a pečlivě analyzujte výkon své aplikace, abyste se ujistili, že dosahujete požadovaných výsledků. Nebojte se experimentovat s různými přístupy a najděte nejlepší řešení pro vaše specifické potřeby.