Как уменьшить бандл без магии: Tree Shaking, Split Points и lazy loading

Как уменьшить бандл без магии: Tree Shaking, Split Points и lazy loading

Сначала убираем лишнее на уровне импорта: тащите только нужные функции, а не целые библиотеки. Проверьте, нет ли «barrel»-экспортов, которые ломают tree shaking, и не подмешиваются ли side effects в модули. Для этого полезно: • перейти на ESM-импорты • пометить sideEffects в сборке • заменить тяжелые util-пакеты точечными функциями.

Дальше режем код по сценариям пользователя. Code Splitting имеет смысл не «везде», а там, где блок реально открывается позже: модалки, табы, редкие формы, личный кабинет. Если компонент нужен только после действия, грузите его через динамический import и держите в отдельном чанке. Главное — не дробить слишком мелко: десятки микрочанков добавляют накладные расходы и усложняют кеширование.

Отдельно смотрим на зависимости. Большой вес часто сидит в датапиках, иконках, редакторах, картах и форматерах дат. Здесь работает простое правило: заменяйте пакеты на точечные модули, выносите тяжелые штуки за границу лендинга или подключайте только при реальном использовании. И обязательно проверяйте сборку анализатором: без визуализации легко пропустить один импорт, который съедает половину бандла.

Вердикт для продакшена: сначала tree shaking и чистые импорты, потом ленивые чанки для редких сценариев. Если после этого вес не падает — ищите один крупный dependency, а не лечите симптом дроблением кода.