Bundle size

JavaScript and CSS bundle size affects download, parse, compile, and execution time—especially on mobile. Control size through dependency discipline, tree shaking, route budgets, and analyzer-driven reviews.

| Technique | Effect | |-----------|--------| | Tree shaking | Drop unused ESM exports when side-effect free | | Route budgets | Fail CI when a chunk exceeds agreed KB | | Dependency audit | Replace heavy libraries (moment → dayjs, lodash → per-method imports) | | Compression | Brotli/gzip at CDN; avoid shipping dev source maps to users |

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

Measure **transferred** and **parsed** size per route, not only total repo weight. Third-party scripts (analytics, chat widgets) often dominate LCP/INP regressions.

On interviews: difference between tree shaking and code splitting; how `sideEffects: false` helps; impact of barrel files; when a small dependency still hurts because it pulls polyfills.

Common pitfalls: importing entire icon or UI libraries; duplicate React versions; shipping locale data for all languages on every page.

The trade-off is developer convenience (big SDKs) versus user network and CPU budgets.

Checklist:

• Set per-route JS budgets in CI.
• Analyze largest chunks after each major dependency add.
• Prefer dynamic import for heavy optional features.
• Audit third-party tags regularly.