Из-за чего растёт JS-бандл и почему размер вредит?

Question

IT Interview Practice · Accepted Answer

**Bundle** — это JavaScript, который ваш инструмент сборки упаковывает и отправляет в браузер. Он растёт в основном из-за **зависимостей**, **дублированного кода** и **отправки кода, который странице пока не нужен**.

## Что его раздувает

- **Тяжёлые библиотеки** — одна библиотека дат или иконок может добавить сотни КБ. Импорт всего `lodash` ради одной функции подтягивает всё целиком.
- **Импорт всего** вместо того, что вы используете:

```js
import _ from "lodash";           // ~70КБ — вся библиотека
import debounce from "lodash/debounce"; // ~2КБ — только нужная функция
```

- **Отсутствие code splitting** — всё приложение (каждый маршрут, каждое модальное окно) собрано в один файл, загружаемый вначале.
- **Полифилы и дублированные зависимости** — две версии одного пакета, собранные дважды.

## Почему размер вредит

Байты — небольшая проблема; **парсинг и выполнение** JS — большая. Браузер должен скачать, затем распарсить, скомпилировать и выполнить каждый байт в главном потоке — и это гораздо медленнее на среднем телефоне, чем на ноутбуке. Тяжёлый JS задерживает интерактивность и напрямую ухудшает **INP** и **LCP**.

## Почему это важно

«Просто добавь библиотеку» — вот как приложения тихо становятся медленными. Интервьюеры хотят видеть, что вы думаете о *стоимости каждой зависимости* и тянетесь к импортам отдельных функций, tree shaking и code splitting до того, как bundle раздуется — особенно потому, что телефоны ваших пользователей гораздо слабее вашей рабочей машины.

Что его раздувает

Почему размер вредит

Почему это важно

Похожие вопросы