Вопрос с собеседования · Frontend

Что такое разделение кода (code splitting) и ленивая загрузка?

MiddleПроизводительность
Ещё спрашивают так:
  • Как уменьшить размер начального бандла?
  • Что делает dynamic import?
Коротко

Вместо одного большого бандла код делят на части, которые грузятся по необходимости: по маршрутам (страница настроек не нужна на главной), по тяжёлым виджетам (редактор, графики, карта). Механизм — динамический import(), сборщик выделяет модуль в отдельный файл; в React — lazy + Suspense. Общие зависимости выносятся в общий чанк. Важно не раздробить слишком мелко: много мелких запросов тоже медленно.

  • Предзагрузка вероятных следующих маршрутов (prefetch) — по наведению или в простое
  • Анализ бандла: какие библиотеки тяжёлые, есть ли дубли
  • Тяжёлую библиотеку часто можно заменить или импортировать частично

Подробно

button.addEventListener('click', async () => {
  const { openEditor } = await import('./editor.js');
  openEditor();
});

Что хотят услышать

  • Деление по маршрутам и тяжёлым компонентам.
  • Динамический import, lazy и Suspense.
  • Баланс числа чанков, prefetch.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Чем мельче чанки, тем всегда быстрее загрузка, поэтому каждый модуль выносят отдельно
  • ✗Code splitting увеличивает начальный бандл, зато ускоряет переходы
  • ✓Код делят на чанки, загружаемые по необходимости через динамический import()
  • ✗Динамический import работает только на сервере, в браузере нужен require

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования