02 — Build: зачем нужен сборщик

Цель: понять, зачем между «скомпилировал» и «открыл в браузере» есть ещё один шаг — сборка (build), и почему Angular 21 делает её через esbuild/vite, а не webpack.

Проблема: файлов слишком много

После компиляции у тебя:

  • твои файлы (App.ts, сервисы, другие компоненты);
  • куски самого Angular (@angular/core, @angular/common...);
  • сторонние библиотеки.

Это сотни и тысячи файлов, и они ссылаются друг на друга через import. Если отдать их браузеру как есть, он будет качать их по одному и захлебнётся.

Аналогия: переезд. Ты не носишь вещи по одной ложке — пакуешь в коробки и везёшь машиной.

Что делает сборщик

Bundler (сборщик) делает 3 вещи:

  1. Склеивает все файлы в несколько (main.js, polyfills.js, styles.css), проходя по цепочке import-ов от точки входа.
  2. Выкидывает лишнее (tree-shaking — «трясёт дерево»): если функцию никто не вызывает, она не попадёт в итоговый файл. Заодно вырезаются dev-подсказки Angular.
  3. Сжимает (minify): убирает пробелы, переименовывает переменные в короткие (changeDetection → a), чтобы файл весил меньше.
твои файлы + Angular + либы
        │  (import → import → import)
        ▼
   ┌──────────┐
   │ bundler  │  склей → вытряси лишнее → сожми
   └──────────┘
        ▼
   dist/main.js   ← один файл, его и качает браузер

Чем собирает Angular 21

В v21 за сборку отвечает билдер @angular/build, а под капотом:

  • esbuild — сборщик, написанный на языке Go. Он в 10–100 раз быстрее старых сборщиков на JavaScript. Используется для prod-сборки (ng build).
  • vite — для разработки (ng serve). Его фишка: в dev он вообще не склеивает файлы. Браузер сам запрашивает модули по мере надобности (нативные ESM), а vite отдаёт их на лету. Поэтому ng serve стартует почти мгновенно и есть HMR (горячая замена — меняешь файл, экран обновляется без перезагрузки).
  • Rollup — финальная полировка prod-сборки (лучшее дерево-тряхание).

dev vs prod — простыми словами

ng serve (разработка) ng build (продакшн)
Инструмент vite esbuild + Rollup
Склеивает файлы? Нет (отдаёт по запросу) Да, в main.js
Скорость старта мгновенно дольше (но один раз)
Сжатие нет да
Зачем быстро видеть изменения маленький быстрый файл для юзеров

Почему ушли от webpack

Раньше (Angular ≤ 13) сборка была на webpack. Он:

  • написан на JS → медленный;
  • сложный в настройке.

esbuild на Go просто быстрее на порядок, а vite даёт мгновенный dev. Для тебя это значит: ng serve стартует за секунды, а не минуту.

Важный вывод

Сборка не меняет смысл кода — она его упаковывает и оптимизирует. Наша template-функция из главы 01 просто оказывается внутри main.js вместе со всем остальным.

Дальше: браузер скачал main.js — пора запускать приложение → 03 — Bootstrap.