intermediate
Bundle splitting
Загружайте код маршрута или фичи по требованию, не задерживая критичные взаимодействия и не вызывая скачков вёрстки.
Разделение бандла загружает JavaScript по требованию через динамический `import()`, обычно с `React.lazy` и `Suspense` для chunk маршрута или фичи. Меньший начальный бандл улучшает time-to-interactive; цена — спиннеры загрузки и координация chunk в рантайме.
Сначала делите на границах маршрутов, затем тяжёлые модалки или редакторы. Prefetch по hover или намерению, если UX позволяет. Следите за размерами chunk в выводе сборки — дубликаты зависимостей между chunk возможны без настройки dedupe.
const Settings = React.lazy(() => import('./Settings'));
На интервью объясняйте концепцию на конкретном примере и называйте поведение, которое проверяют.
Типовые ошибки: скрывать поток данных, дробить компоненты чрезмерно и выполнять побочные эффекты в render.
Компромисс часто между ясностью и переиспользованием или между явными props и удобством.
Чеклист:
- Ленивая загрузка маршрутов и тяжёлых фич.
- Fallback Suspense при загрузке chunk.
- Следите за дублями зависимостей между chunk.