Package Managers и Bundlers

Для чего модуль

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

Результат после прохождения

1. Вы понимаете различия npm/pnpm/yarn и выбираете менеджер под контекст команды.
2. Вы управляете lockfile-политикой и обновлениями зависимостей без хаоса.
3. Вы проектируете стратегию бандлинга по пользовательским сценариям.
4. Вы контролируете bundle growth и supply-chain риски.

Термины и аббревиатуры

Термин	Коротко
Lockfile	Фиксация точных версий
SemVer	Схема версий major/minor/patch
Tree-shaking	Удаление неиспользуемого кода
Code splitting	Разделение бандла
CVE	Публичная уязвимость

Фокус по грейдам

1. Junior: понимать базовые механики и объяснять их простыми примерами.
2. Middle: применять тему в продуктовых сценариях с учетом рисков и ограничений.
3. Senior: управлять архитектурными trade-offs, метриками и эволюцией решения.

Как работать с модулем

1. На каждом уроке меняйте только один аспект и измеряйте эффект.
2. Для каждой dependency/bundle правки фиксируйте риск и план отката.
3. Ведите журнал изменений dependency policy и bundle budgets.

Программа модуля

Урок 1. Package management как инженерная система

Цель: сделать работу с зависимостями воспроизводимой и контролируемой.

npm vs pnpm vs yarn

1. Storage model и скорость установки.
2. Изоляция зависимостей и риск скрытых peer dependency проблем.
3. Влияние на CI cache и developer workflow.

Lockfile discipline

1. Lockfile коммитится всегда.
2. Обновления зависимостей идут по понятному процессу.
3. Для критичных обновлений есть owner и smoke-проверка.

Где ломается в проде

1. Обновление версии «по пути» без проверки release notes.
2. Разные менеджеры пакетов в одной команде.
3. Broken installs из-за несовместимых peer dependencies.

Мини-задача (обязательная)

Опишите dependency policy: какие обновления автоматические, какие ручные, кто владелец, какой rollback.

Что спросит интервьюер: почему вы выбрали конкретный package manager для команды.

Критерий готовности по уроку: вы можете объяснить зависимостную политику как часть reliability процесса.

Урок 2. Bundlers и стратегия загрузки

Цель: собирать код так, чтобы он быстро доставлялся пользователю и оставался поддерживаемым.

Стратегия чанкинга

1. Entry/core/vendor boundaries.
2. Route-based и component-based splitting.
3. Предиктивная prefetch/preload стратегия.

Tree shaking и dead code control

1. ESM как условие эффективного tree shaking.
2. Избегать side-effectful imports.
3. Анализировать реальные причины «толстого» bundle.

Где ломается в проде

1. Один огромный initial chunk для всех маршрутов.
2. Подключение тяжелых библиотек на критичном пути.
3. Оптимизация «вслепую» без bundle analysis.

Мини-задача (обязательная)

Разбейте загрузку для 3 экранов и покажите: какие чанки грузятся сначала, какие позже и почему.

Что спросит интервьюер: как вы уменьшаете initial JS, не ломая функциональность.

Критерий готовности по уроку: вы можете обосновать стратегию чанкинга через UX и метрики загрузки.

Урок 3. Bundle governance и perf budgets

Цель: держать размер и стоимость бандла под контролем на длинной дистанции.

Что измерять

1. Initial JS per route.
2. Динамические chunks и долгосрочная кэшируемость.
3. Влияние bundle size на LCP/INP и time-to-interactive.

Budgets и quality gates

1. Budget пороги на route/chunk.
2. CI-проверки превышений.
3. Правила эскалации: когда блокируем merge/release.

Где ломается в проде

1. Bundle растет «по чуть-чуть» и никто не замечает.
2. Нет владельца за performance debt.
3. Оптимизации точечные и не сохраняются в процессе.

Мини-задача (обязательная)

Внедрите bundle budget и подготовьте реакцию на превышение: кто смотрит, какие шаги, когда блокируется релиз.

Что спросит интервьюер: как вы управляете ростом бандла в команде из нескольких разработчиков.

Критерий готовности по уроку: вы можете показать governance-процесс, который реально удерживает bundle под контролем.

Урок 4. Безопасность и supply chain зависимостей

Цель: снизить риск уязвимостей и компрометации зависимостей.

Supply chain baseline

1. Dependency audit и triage процесс.
2. Политика для deprecated/unmaintained пакетов.
3. Проверка лицензий и юридических ограничений.

Практика безопасных обновлений

1. Небольшие регулярные обновления лучше редких «больших взрывов».
2. Канареечный rollout для рискованных апдейтов.
3. Возможность быстрого rollback версии.

Где ломается в проде

1. Критичные CVE закрываются с большим лагом.
2. Обновления делают без regression-check.
3. Нет инвентаризации зависимостей и их owners.

Мини-задача (обязательная)

Соберите supply-chain checklist для релиза: audit, лицензии, owners, rollback plan.

Что спросит интервьюер: как вы балансируете скорость обновлений и риск регрессий.

Критерий готовности по уроку: вы можете управлять зависимостями как риском, а не только как «списком пакетов».

Практика

Работайте не через общий список ссылок, а через 4 проверяемых артефакта.

Блок	Ответить	Practice action	Readiness
Dependency policy	q-1..q-7	Free-practice: dependency policy + ownership matrix для проекта с prod, dev, peer и optional dependencies	Вы объясняете package manager choice, lockfile policy, npm ci, SemVer risk и peer conflict rollback
Bundle strategy	q-8..q-12	Free-practice: bundle growth incident report для 3 маршрутов: baseline, culprit, split plan, verification	Вы называете initial chunk, lazy chunk, vendor boundary, tree-shaking risk и метрику проверки
Release/security gates	q-13..q-18	Free-practice: release gate + vulnerability triage note: severity, exploitability, owner, rollout, rollback	Вы отделяете block/review/accept risk и не чините CVE обновлением вслепую
Migration review	q-19..q-20	Free-practice: bundler config smell review + Webpack-to-Vite migration checklist	Вы показываете risks, compatibility checks, source map policy, env exposure audit и phased rollout

Если один блок получает partial или not ready, не переходите к следующему модулю: повторите связанные вопросы и перепишите артефакт до состояния, где есть risk -> decision -> verification.

Связь с треками и вопросами

1. Треки: Junior трек, Middle трек, Senior трек.
2. Вопросы: Package Managers и Bundlers, Senior Frontend q-16..q-18, Middle q-20.
3. Мост практики: Tooling and bundle quality -> dependency policy, bundle growth incident report, release gate + vulnerability triage note.
4. Route checkpoints: Junior день 12, Middle день 11, Senior день 9.
5. Повторение через 24 часа: один вопрос про lockfile, один про bundle strategy, один про release/security gate.

Критерий готовности

Ready, если вы защищаете package management и bundling через метрики, риски и процессы эксплуатации:

1. можете за 60-90 секунд объяснить npm install vs npm ci, lockfile и SemVer range risk;
2. показываете bundle decision через user journey, а не через "так меньше размер";
3. называете failure mode: broken peer dependency, env leak, source map leak, bundle regression или CVE rollout risk;
4. предлагаете проверку: CI gate, bundle analysis, smoke-test, canary rollout или rollback plan.

Partial, если definitions понятны, но не хватает конкретного artifact или проверки. Not ready, если ответ сводится к "обновить зависимости" или "разбить бандл" без риска, owner и verification.

Артефакты после модуля

1. Dependency policy документ.
2. Bundle growth incident report.
3. Bundle governance + budgets.
4. Supply-chain checklist.
5. Release gate + vulnerability triage note.
6. Набор из 6 сильных interview-ответов по теме.

Куда дальше

1. Tooling и Delivery
2. Node.js
3. Package Managers
4. Сборщики