Как разделить код по маршрутам через lazy и Suspense?
- Что делает React.lazy?
- Зачем вложенные границы Suspense?
lazy(() => import("./Page")) превращает компонент в отдельный чанк, который загрузится при первом показе. Пока он грузится, ближайшая <Suspense fallback> показывает запасной интерфейс. Делить код логично по маршрутам и тяжёлым редко нужным частям (редактор, графики). Вложенные границы Suspense дают постепенное появление: каркас страницы сразу, медленные блоки — по мере готовности, каждый со своим скелетоном. Suspense работает и для данных — с библиотеками и фреймворками, которые его поддерживают.
- Ошибку загрузки чанка ловит граница ошибок
- Слишком мелкое деление — много запросов
- Предзагрузка при наведении на ссылку ускоряет переход
А ещё Скелетон похожей формы воспринимается быстрее, чем спиннер
Подробно
const Reports = lazy(() => import("./pages/Reports"));
<Suspense fallback={<PageSkeleton />}>
<Reports />
</Suspense>Что хотят услышать
- lazy и отдельные чанки.
- Suspense и fallback.
- Деление по маршрутам и вложенные границы.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗lazy загружает компонент при старте приложения вместе с остальным кодом, просто позже рендерит
- ✓lazy выносит компонент в отдельный чанк, Suspense показывает fallback во время загрузки
- ✗Suspense ловит ошибки загрузки чанка, поэтому граница ошибок вокруг lazy не нужна
- ✗Чем мельче деление на чанки, тем всегда быстрее
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.