Для чего нужен React.lazy

Что проверяют

Понимаете ли вы, что уменьшает время загрузки приложения, и знаете ли, где ленивая загрузка помогает, а где вредит.

Как отвечать

React.lazy позволяет загрузить код компонента отдельным файлом в тот момент, когда он понадобился, а не в общем начальном бандле. Сборщик видит динамический импорт и режет сборку по этой границе.

const ResumeEditor = lazy(() => import("./ResumeEditor"));

<Suspense fallback={<Spinner />}>
  <ResumeEditor />
</Suspense>

Suspense обязателен: пока чанк грузится, React показывает запасной интерфейс.

Где это даёт настоящий выигрыш: маршруты (каждый экран своим чанком), тяжёлые библиотеки под конкретный сценарий (редактор, графики, карта, экспорт в PDF), модальные окна и панели, которые открывает меньшинство пользователей.

Что стоит добавить, чтобы ответ звучал практично:

• предзагрузка: чанк можно начать грузить заранее по наведению на ссылку или в простое, тогда клик кажется мгновенным;
• обработка ошибок: загрузка чанка может упасть при обрыве сети или после выката новой версии, когда старый файл исчез. Нужен предохранитель с предложением перезагрузить страницу;
• не дробить слишком мелко: сотня крошечных чанков это сотня запросов, выигрыш съедается задержками;
• серверный рендер: React.lazy работает и там, но в Next.js для этого есть свой next/dynamic с управлением серверным рендерингом.

Где спотыкаются

Оборачивают в ленивую загрузку компонент, который виден на первом экране, и добавляют мигание вместо ускорения.

Забывают Suspense и получают ошибку рендера.

Не ставят предохранитель, и после релиза у пользователей со старой вкладкой белый экран.