Динамический импорт компонентов в React. — 26 июня 2026 г. в 07:20:04.531
Динамический импорт компонентов в 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