Как динамические импорты и lazy loading влияют на размер бандла?

Question

Динамические импорты и lazy loading позволяют разбивать код на части и загружать их по мере необходимости. Это уменьшает размер стартового бандла и ускоряет первый рендер. Пользователь загружает только тот код, который реально нужен в текущий момент. В результате приложение становится быстрее на старте.

YeaHub · Accepted Answer

Современные фронтенд-приложения быстро растут, и загрузка всего кода сразу становится неэффективной.Проблема большого бандлаЕсли всё приложение собирается в один бандл:увеличивается время загрузкирастёт время парсинга и выполнения JSухудшается First Contentful PaintДаже если пользователь не заходит на часть экранов, код для них всё равно загружается.Что делают динамические импортыДинамический импорт (import()) сообщает сборщику:этот код можно вынести в отдельный чанкзагружать его только при необходимостиimport('./HeavyModule').then(module => {
  module.run()
})
Webpack или другой бандлер:создаёт отдельный файлзагружает его асинхронноLazy loading в ReactВ React чаще используется связка:React.lazySuspenseconst SettingsPage = React.lazy(() => import('./SettingsPage'))
Это даёт:уменьшение initial bundleзагрузку страницы только при переходеконтроль UX через fallbackКак это влияет на размер бандлаInitial bundleстановится меньшебыстрее загружается и исполняетсяОбщий объём кодане уменьшаетсяпросто распределяется по чанкамКешированиечанки кешируются отдельноизменения в одной части не инвалидируют весь бандлОграничения и подводные камнислишком мелкие чанки → много сетевых запросовlazy loading внутри критического пути → задержки UIне всё имеет смысл грузить лениво (например, базовую навигацию)Краткий выводДинамические импорты и lazy loading уменьшают размер стартового бандла и ускоряют первый рендер. Это один из ключевых инструментов оптимизации производительности, но его нужно применять осознанно, не дробя код без необходимости.