Как работает React.lazy и code splitting?

Функция React.lazy совместно с механизмом code splitting решает одну из главных проблем крупных клиентских приложений — снижение времени первоначальной загрузки страницы. Если пользователь заходит на главную страницу сайта, ему абсолютно не нужно скачивать JavaScript-код административной панели или тяжелых модальных окон, которые могут вообще не понадобиться за всю сессию. Разделение кода позволяет нарезать итоговый бандл на небольшие логические части и отдавать их браузеру строго по требованию.

Для реализации этого подхода компонент оборачивается в вызов React.lazy, который принимает функцию с динамическим импортом. Поскольку этот импорт является асинхронным, React во время рендеринга сталкивается с ожиданием и требует наличия родительского элемента с fallback-состоянием. Таким образом, React.lazy неразрывно связан с компонентом Suspense, который отображает индикатор загрузки в момент скачивания нужного модуля из сети.

Грамотное проектирование точек разделения кода требует баланса. Чаще всего код делят по страницам или крупным маршрутам приложения с помощью роутера. Реже разделяют изолированные тяжелые виджеты, графики или редакторы кода, которые открываются по явному клику пользователя. При этом нельзя дробить приложение на слишком мелкие части, так как это приведет к лавинообразному росту HTTP-запросов за мелкими файлами, что ухудшит общую производительность сети.

Для контроля над размером и структурой получаемых чанков разработчики используют специальные инструменты анализа сборки. Анализаторы бандлов визуально показывают, какие библиотеки и модули занимают больше всего места в итоговых файлах. Это помогает вовремя обнаружить дублирование кода или случайное включение тяжелых зависимостей в начальный чандл приложения.