Минимальный бандл — не магия: как не тащить в лендинг лишние килобайты

Минимальный бандл — не магия: как не тащить в лендинг лишние килобайты

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

Tree shaking работает только там, где модули написаны предсказуемо: ES-модули, без побочных эффектов в top-level-коде. Если пакет помечен как «side effects», сборщик часто оставляет лишнее. Практика простая: импортируйте точечно, избегайте barrel-файлов без нужды, удаляйте неиспользуемые экспортные обертки.

Code splitting нужен не ради красоты, а чтобы не грузить весь лендинг сразу. Делите по маршрутам, блокам с редким показом и тяжёлым виджетам: калькулятор, карта, чат, видео. Но не режьте на слишком мелкие чанки — лишние запросы и задержка загрузки легко съедают выгоду ⚠️

Вердикт для продакшена: сначала измерьте размер исходного бандла, потом уберите дубли, затем вынесите тяжёлые зависимости в отдельные чанки. Если после этого LCP и TTI не улучшаются, проблема уже в раннем рендере, а не в самом сборщике.