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

Question

React.lazy используется для ленивого импорта компонентов, а Suspense позволяет показывать индикатор загрузки, пока компонент загружается.

YeaHub · Accepted Answer

React.lazy и Suspense работают вместе, чтобы облегчить загрузку больших компонентов или страниц. Основная идея заключается в том, чтобы загружать компоненты только тогда, когда они действительно нужны.Настройка React.lazy:Используйте функцию React.lazy для ленивого импорта:const Profile = lazy(() => import('./Profile'));Использование Suspense:Оберните маршруты или компоненты в для обработки состояния загрузки:import { Suspense } from 'react'; const App = () => ( Loading...}> } /> );Преимущества:Компоненты подгружаются только при их использовании.Уменьшается время загрузки главной страницы приложения.Пример с вложенными маршрутами:Работает и с вложенными маршрутами:const Dashboard = lazy(() => import('./Dashboard')); const Settings = lazy(() => import('./Settings')); const App = () => ( Loading...}> }> } /> );Таким образом, lazy и Suspense позволяют управлять загрузкой компонентов, минимизируя время загрузки приложения и улучшая пользовательский опыт.