Как использовать Suspense и lazy для загрузки компонентов маршрутов?

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

Настройка React.lazy:

Используйте функцию React.lazy для ленивого импорта:

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

Использование Suspense:

Оберните маршруты или компоненты в <Suspense> для обработки состояния загрузки:

import { Suspense } from 'react';

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/profile" element={<Profile />} />
    </Routes>
  </Suspense>
);

Преимущества:

- Компоненты подгружаются только при их использовании.

- Уменьшается время загрузки главной страницы приложения.

Пример с вложенными маршрутами:

- Работает и с вложенными маршрутами:

const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  </Suspense>
);

Таким образом, lazy и Suspense позволяют управлять загрузкой компонентов, минимизируя время загрузки приложения и улучшая пользовательский опыт.