🌍 Привет мир! 👋

🌍 Привет мир! 👋

А у меня сегодня про performance, и разговор пойдет про React.lazy. На самом деле в большинстве ваших проектах можно пропустить использование Lazy, но понимание принципа работы и умение грамотно использовать данную возможность, сделает вас как разработчика еще на шаг выше остальных. Перед прочтением рекомендую ознакомиться со статьей о динамических импортах.

📈 Немного занимательной статистики

🔎 Нашел ресурс со свежими данными в котором говорится, почему быстрая загрузка веб-сайта имеет решающее значение:

📎 Время загрузки страницы на мобильном устройстве в 10 секунд увеличивает показатель отказов на 123% по сравнению со скоростью загрузки в одну секунду.

📎 53% посетителей мобильных сайтов покидают страницу, если ее загрузка занимает более трех секунд.

📎 Коэффициент конверсии веб-сайта падает на 4,42% с каждой секундой загрузки, которая составляет от нуля до пяти секунд.

📎 Почти 70% посетителей говорят, что скорость загрузки страниц влияет на их готовность совершать покупки в интернет-магазине.

🚀 Мотивация

Использование ленивой загрузки это один из способов уменьшить нагрузку на браузер (за счет более скоромного начального размера бандла) и как следствие уменьшить время загрузки приложения.

❓ В чем идея Lazy

⚙️ Принцип ленивой загрузки (lazy loading) заключается в том, что загружаются ресурсы или данные только тогда, когда они действительно нужны, а не заранее.

⚙️ Lazy использует динамический импорт, тем самым появляется возможность динамически импортировать модуль или компонент во время выполнения кода.

⚙️ Компоненты, которые могут никогда не понадобиться пользователю (например, если он никогда не переключит вкладку), вообще не будут загружены.

✏️ Пример:

Представим, что у нас есть 2 тяжелых компонента, с кучей сложных бизнесовых манипуляций, и не хотелось бы в начальный бандл пихать оба эти компонента.

- Что делаем?
- Конечно, используем React.lazy для ленивой загрузки.

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

// Ленивая загрузка двух компонентов
const CompA = lazy(() => import('./CompA'));
const CompB = lazy(() => import('./CompB'));

export const TestComponent = () => {
  const [showCompA, setShowCompA] = useState(true);

  return (
    <div>
      <button onClick={() => setShowCompA((prev) => !prev)}>
        Показать {showCompA ? 'CompB' : 'CompA'}
      </button>

      <Suspense fallback={<div>Загрузка...</div>}>
        {showCompA ? <CompA /> : <CompB />}
      </Suspense>
    </div>
  );
}

Как это работает❓

1️⃣ Ленивая загрузка по необходимости: Компоненты CompA и CompB загружаются только тогда, когда они нужны. При первом рендере главный бандл не включает код этих компонентов, так как они будут загружены динамически (по запросу) благодаря lazy.

2️⃣ Начальное состояние: Несмотря на то, что начальное состояние useState установлено как true (т.е. CompA должен быть отрисован), его код не включен в главный бандл. Это связано с тем, что lazy и динамический импорт работают асинхронно, и компонент загружается только при попытке его рендера.

3️⃣ Механизм загрузки: При первом рендере, если состояние showCompA = true, React запускает динамическую загрузку кода CompA. Пока он загружается, вместо него показывается содержимое fallback из <Suspense> (в данном случае это <div>Загрузка...</div>).

4️⃣ После загрузки: Когда загрузка компонента завершается, React заменяет fallback на готовый рендер компонента.

☀️ И немного про Suspense

Suspense управляет отображением, пока лениво загружаемый компонент не станет доступен. В примере выше Suspense показывает "Загрузка..." до завершения загрузки CompA или CompB. Про Suspense подробнее поговорим в следующих статьях.

‼️ Важно: Не нужно использовать Lazy повсеместно, подходите к его применению обоснованно. Использование lazy оправдано, когда речь идет о загрузке тяжелых или редко используемых компонентов, которые не требуются при первом рендере страницы.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк! 👍

#REACT #PERFORMANCE