Как уменьшить бандл лендинга без магии: от Tree Shaking до Code Splitting

Как уменьшить бандл лендинга без магии: от Tree Shaking до Code Splitting

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

Tree Shaking работает только там, где код статичен и сборщик видит, что реально используется. Если модуль пишет побочные эффекты, тянет CSS глобально или экспортирует все подряд, лишнее останется в финальном файле. Для проверки смотрите не на исходники, а на итоговый bundle analyzer.

Code Splitting нужен не «везде», а там, где есть редкие сценарии: модалки, личный кабинет, сложные калькуляторы, тяжелые графики. Если компонент нужен на первом экране, откладывать его бессмысленно — вы добавите запрос, но не ускорите отрисовку. ⚙️

Базовый чек-лист: • уберите неиспользуемые импорты • замените монолитные UI-пакеты на точечные импорты • вынесите редкие блоки в динамическую загрузку • проверьте дубли зависимостей • не тащите polyfill'ы и иконки «на всякий случай».

Вердикт для продакшена: минимизация бандла — это не одна техника, а дисциплина. Сначала чистите импорт и зависимости, потом режьте по маршрутам и сценариям. И только после этого измеряйте результат по реальному весу и времени до интерактива.