Как работает ленивый роутинг (lazy loading) в React Router DOM?

Question

Ленивый роутинг загружает компоненты маршрутов только при их необходимости. Это достигается использованием функции React.lazy в сочетании с динамическим импортом (import()), что позволяет уменьшить начальный размер бандла.

YeaHub · Accepted Answer

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