Динамический импорт компонентов в React.

Часто в приложении мы грузим сразу всё, даже то, что пользователю может и не понадобиться. Например, модальные окна, сложные графики, админские панели. Это увеличивает бандл и замедляет загрузку.

Решение простое - использовать React.lazy и Suspense:

import { Suspense, lazy } from "react";

const Chart = lazy(() => import("./Chart"));

function Dashboard() {
return (
<div>
<h1>Статистика</h1>
<Suspense fallback={<p>Загрузка графика...</p>}>
<Chart />
</Suspense>
</div>
);
}

Теперь график подгрузится только тогда, когда реально нужен.
⚡ Это экономит мегабайты и ускоряет first paint приложения.

👉 Но будь аккуратен: динамический импорт хорошо работает для редко используемых частей. А если компонент нужен почти всегда - выгоды не будет.

Я, например, почти всегда лениво загружаю модальные окна и тяжелые виджеты.
А ты используешь React.lazy у себя в проекте?

✍️ @React_lib