Как резать бандл без боли: Tree Shaking, Code Splitting и порядок в импортах

Как резать бандл без боли: Tree Shaking, Code Splitting и порядок в импортах

Сначала убираем не фичи, а мусор: дубли библиотек, тяжёлые икон-паки, «barrel»-импорты через один файл. Если модуль тянет весь пакет, дерево не спасёт — импортируйте точечно и проверяйте, действительно ли пакет поддерживает tree shaking. Два одинаковых date-utils в бандле — частая и дорогая ошибка.

Tree Shaking работает только на статическом графе зависимостей. Значит, опасны динамические конструкции: условные require, реэкспорты без нужды, побочные эффекты в модулях. Для пакетов с side effects нужен отдельный аудит: иногда достаточно убрать лишний импорт стилей или вынести инициализацию в отдельный файл.

Code Splitting режет не размер проекта, а цену первого экрана. Делите по маршрутам, тяжёлым виджетам, редакторам, графикам и модалкам, которые не нужны сразу. Ленивая загрузка полезна только там, где компонент реально откладывается; иначе получите лишние запросы и фрагментацию кода без выигрыша ⚙️

Проверка простая: сборка, анализатор бандла, сравнение точек входа до и после. Смотрите не только на общий вес, но и на JS, который блокирует рендер. Если после «оптимизации» выросло число чанков и просели переходы, значит вы уменьшили цифру в отчёте, а не ускорили интерфейс.

Вердикт для продакшена: сначала чистим импорты и побочные эффекты, потом дробим тяжелые экраны. Минимизация бандла — это не магия сборщика, а дисциплина в архитектуре и зависимостях.