Как работает ленивый роутинг (lazy loading) в React Router DOM?
Этот вопрос проверяет знание ленивой загрузки маршрутов
Короткий ответ
Ленивый роутинг загружает компоненты маршрутов только при их необходимости. Это достигается использованием функции React.lazy в сочетании с динамическим импортом (import()), что позволяет уменьшить начальный размер бандла.
Длинный ответ
Ленивый роутинг позволяет загружать компоненты маршрутов "по требованию", а не включать их в начальный бандл. Это особенно полезно для больших приложений, где не все страницы требуются сразу.
Пример реализации:
Импортируйте компоненты лениво с помощью React.lazy:
import { lazy } from 'react';
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));Используйте <Suspense> для отображения индикатора загрузки:
import { Routes, Route } from 'react-router-dom';
import { Suspense } from 'react';
const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
);
Как это работает:
- Когда пользователь переходит на маршрут /about, компонент About загружается динамически.
- Это снижает нагрузку на начальную загрузку приложения.