Размер bundle

Размер JavaScript и CSS bundle влияет на download, parse, compile и execution — особенно на mobile. Контролируйте через дисциплину зависимостей, tree shaking, route budgets и review по analyzer.

| Техника | Эффект | |---------|--------| | Tree shaking | Удаление неиспользуемых ESM export при side-effect free | | Route budgets | Падение CI при превышении chunk лимита в KB | | Dependency audit | Замена тяжёлых библиотек (moment → dayjs, lodash → точечные импорты) | | Compression | Brotli/gzip на CDN; не отдавать dev source maps пользователям |

					npx webpack-bundle-analyzer stats.json
# или: next build && npx @next/bundle-analyzer
				

Измеряйте **transferred** и **parsed** size на route, а не только вес репозитория. Third-party scripts (analytics, chat) часто ломают LCP/INP.

На интервью: tree shaking vs code splitting; роль `sideEffects: false`; barrel files; когда маленькая зависимость тянет polyfills.

Типовые ошибки: импорт целых icon/UI библиотек; дубликаты React; locale data всех языков на каждой странице.

Компромисс — удобство разработки (большие SDK) против сетевого и CPU бюджета пользователя.

Чеклист:

• JS budgets per route в CI.
• Analyzer после крупных зависимостей.
• Dynamic import для тяжёлых опций.
• Регулярный audit third-party тегов.