Build Tools — Senior Interview Prep

Bundlers, transformers, monorepo tools, package managers — the parts of the frontend build chain a senior is expected to understand and tune. Not “how do I configure Webpack” line-by-line — what each tool is for, what it trades, and when to pick which.

Files

#	Topic
01	Vite vs Webpack vs Turbopack vs Parcel — what each optimizes for
02	esbuild vs SWC vs Babel — speed and plugin trade-offs
03	Module formats — ESM vs CJS vs UMD, the dual-package hazard
04	Code splitting mechanics — dynamic import, manual chunks
05	Source maps — modes and trade-offs
06	Monorepo tools — Turborepo, Nx, pnpm workspaces
07	Package managers — npm vs pnpm vs yarn, lockfile semantics
08	Dev-server internals — HMR, pre-bundling, dependency resolution

The decision cheat sheet

Decision	Default answer (2026)	When to deviate
Bundler for a new app	Vite	existing Webpack config / Next.js (Turbopack) / React Native (Metro)
Transformer	SWC (Vite/Next.js default) or esbuild (Vite dev)	need a Babel plugin no SWC equivalent exists for
Package manager	pnpm	npm if it’s the team’s strong preference, yarn for legacy
Monorepo runner	Turborepo for simple, Nx for opinionated/structured	Lerna is legacy
Lockfile	always commit	one source of truth per repo
Module format you ship	ESM with CJS fallback via `exports` map	library only — apps don’t ship

Cross-references

Bundle analysis / code splitting strategy: ../15_performance/03_bundle_analysis_and_code_splitting.md
Tree shaking (depends on bundler): ../15_performance/04_tree_shaking.md
Project structure (monorepo layout): ../12_project_structure/