🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy

🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy

Сегодня расскажу о код-сплиттинге в React — мощном инструменте для ускорения загрузки приложения.

Когда наше приложение растёт, бандл становится тяжёлым, а время загрузки — длиннее. Решение? Код-сплиттинг. Он позволяет загружать только нужные компоненты, а не весь код сразу.

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

Используем React.lazy() и Suspense, чтобы загружать компоненты только когда они реально нужны.

📌 Пример:

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

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {

return (

<div>

  <h1>Главная страница</h1>

  <Suspense fallback={<p>Загрузка...</p>}>

    <HeavyComponent />

  </Suspense>

</div>

);

}

export default App;

Здесь HeavyComponent загружается только тогда, когда он нужен, а пока он загружается — показывается fallback.

📍 Где это использовать?

✔ Ленивые модули

✔ Большие страницы (Dashboard, Profile)

✔ Админ-панели

✔ Карты, графики, таблицы

Но помни: React.lazy работает только для компонентов. Для остального кода (например, утилит) лучше использовать динамический импорт (import()).

Попробуй внедрить код-сплиттинг в свой проект и скажи, насколько ускорилась загрузка! 🚀

✍️ @React_lib