Как использовать 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 позволяют управлять загрузкой компонентов, минимизируя время загрузки приложения и улучшая пользовательский опыт.