React

🔥 Оптимизация 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

www.tg-me.com/it/React/com.React_lib/653

1.0K viewsFeb 20 at 19:24

🔥 Оптимизация 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;

BY React