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

import React, { Suspense } from 'react';

function MyPage() {
  return (
    Завантаження...

У цьому прикладі повідомлення Завантаження... буде відображатися, поки MyComponent завантажується. Як тільки компонент буде завантажено, він замінить резервний інтерфейс.

3. Практичний приклад: відкладене завантаження великої галереї зображень

Розглянемо сценарій, де у вас є велика галерея зображень. Завантаження всіх зображень одразу може суттєво вплинути на продуктивність. Ось як ви можете відкладено завантажувати зображення за допомогою React.lazy() та <Suspense>:

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' },
    // ... більше зображень
  ];

  return (
    

      {images.map(image => (
        Завантаження зображення...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

І компонент Image.js:

import React from 'react';

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

export default Image;

У цьому прикладі кожне зображення обгорнуте в компонент <Suspense>, тому для кожного зображення під час його завантаження буде відображатися повідомлення про завантаження. Це запобігає блокуванню всієї сторінки під час завантаження зображень.

Просунуті техніки та рекомендації

1. Межі помилок (Error Boundaries)

При використанні відкладеного завантаження важливо обробляти потенційні помилки, які можуть виникнути під час процесу завантаження. Межі помилок можна використовувати для перехоплення цих помилок та відображення резервного інтерфейсу. Ви можете створити компонент межі помилок наступним чином:

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Оновлюємо стан, щоб наступний рендер показав резервний UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Ви також можете логувати помилку в сервіс звітності про помилки
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Ви можете рендерити будь-який власний резервний UI
      return 
Щось пішло не так.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Потім обгорніть компонент <Suspense> у <ErrorBoundary>:

  Завантаження...}>
    
  

Якщо під час завантаження MyComponent виникне помилка, <ErrorBoundary> перехопить її та відобразить резервний інтерфейс.

2. Серверний рендеринг (SSR) та відкладене завантаження

Відкладене завантаження також можна використовувати разом із серверним рендерингом (SSR) для покращення початкового часу завантаження вашого додатка. Однак це вимагає додаткової конфігурації. Вам потрібно буде переконатися, що сервер може коректно обробляти динамічні імпорти, і що компоненти з відкладеним завантаженням правильно гідратуються на стороні клієнта.

Інструменти, такі як Next.js та Gatsby.js, надають вбудовану підтримку для відкладеного завантаження та розділення коду в середовищах SSR, що значно спрощує процес.

3. Попереднє завантаження компонентів

У деяких випадках ви можете захотіти попередньо завантажити компонент до того, як він справді знадобиться. Це може бути корисно для компонентів, які, ймовірно, будуть відрендерені незабаром, наприклад, компоненти, що знаходяться під згином, але, ймовірно, будуть прокручені у видиму область. Ви можете попередньо завантажити компонент, викликавши функцію import() вручну:

import('./MyComponent'); // Попереднє завантаження MyComponent

Це почне завантаження компонента у фоновому режимі, тому він буде доступний швидше, коли його справді потрібно буде відрендерити.

4. Динамічні імпорти з магічними коментарями Webpack

"Магічні коментарі" Webpack надають спосіб налаштовувати імена згенерованих частин коду. Це може бути корисним для налагодження та аналізу структури бандла вашого додатка. Наприклад:

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

Це створить частину коду з назвою "my-component.js" (або схожою) замість загальної назви.

5. Уникнення поширених помилок

• Надмірне розділення: Розбиття коду на занадто багато маленьких частин може насправді погіршити продуктивність через накладні витрати на виконання численних мережевих запитів. Знайдіть баланс, який підходить для вашого додатка.
• Неправильне розміщення Suspense: Переконайтеся, що ваші <Suspense> межі розміщені належним чином для забезпечення хорошого користувацького досвіду. Уникайте обгортання цілих сторінок у <Suspense>, якщо це можливо.
• Забування про межі помилок: Завжди використовуйте межі помилок для обробки потенційних помилок під час відкладеного завантаження.

Реальні приклади та випадки використання

Відкладене завантаження можна застосовувати до широкого спектра сценаріїв для покращення продуктивності React-додатків. Ось кілька прикладів:

• Сайти електронної комерції: Відкладене завантаження зображень товарів, відео та детальних описів продуктів може значно покращити початковий час завантаження сторінок товарів.
• Блоги та новинні сайти: Відкладене завантаження зображень, вбудованих відео та розділів коментарів може покращити досвід читання та зменшити показник відмов.
• Дашборди та адмін-панелі: Відкладене завантаження складних діаграм, графіків та таблиць даних може покращити чутливість дашбордів та адмін-панелей.
• Односторінкові додатки (SPAs): Відкладене завантаження маршрутів та компонентів може зменшити початковий час завантаження SPA та покращити загальний користувацький досвід.
• Інтернаціоналізовані додатки: Завантаження ресурсів, специфічних для локалі (текст, зображення тощо), лише тоді, коли вони потрібні для мови користувача. Наприклад, завантаження німецьких перекладів для користувача в Німеччині та іспанських перекладів для користувача в Іспанії.

Приклад: Міжнародний сайт електронної комерції

Уявіть собі сайт електронної комерції, що продає товари по всьому світу. Різні країни можуть мати різні валюти, мови та каталоги товарів. Замість того, щоб завантажувати всі дані для кожної країни наперед, ви можете використовувати відкладене завантаження для завантаження даних, специфічних для місцезнаходження користувача, лише коли він відвідує сайт.

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

function ECommerceSite() {
  const userCountry = getUserCountry(); // Функція для визначення країни користувача

  return (
    Завантаження контенту для вашого регіону...}>
      
      
    
  );
}

Висновок

Відкладене завантаження та розділення коду компонентів — це потужні техніки для оптимізації продуктивності React-додатків. Завантажуючи компоненти лише тоді, коли вони потрібні, ви можете значно скоротити початковий час завантаження, покращити користувацький досвід та посилити своє SEO. Вбудовані компоненти React React.lazy() та <Suspense> спрощують впровадження відкладеного завантаження у ваших проектах. Використовуйте ці техніки для створення швидших, чутливіших та більш захоплюючих веб-додатків для глобальної аудиторії.

Пам'ятайте завжди враховувати користувацький досвід при впровадженні відкладеного завантаження. Надавайте інформативні резервні інтерфейси, витончено обробляйте потенційні помилки та ретельно аналізуйте продуктивність вашого додатка, щоб переконатися, що ви досягаєте бажаних результатів. Не бійтеся експериментувати з різними підходами та знаходити найкраще рішення для ваших конкретних потреб.