Build Tools — Senior Interview Prep
On this page3
- Files
- The decision cheat sheet
- Related
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
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 |
Contents
8
- Vite vs Webpack vs Turbopack vs Parcel 4 Four bundlers, four philosophies. Webpack is the incumbent — flexible, plugin-rich, complex.
- esbuild vs SWC vs Babel 4 Three TypeScript/JSX transformers. Babel is the long-time standard — JS-implemented, huge plugin ecosystem, slow.
- Module Formats — ESM vs CJS vs UMD, the Dual-Package Hazard 5 Three module formats you'll encounter: ESM (import/export, the modern standard, native in browsers + Node 14+), CJS (require/module.exports, Node's…
- Code Splitting Mechanics — Dynamic Imports, Manual Chunks 5 A chunk is a bundle file produced by your bundler.
- Source Maps — Modes and Trade-offs 5 A source map is a sidecar file that maps positions in the bundled/transformed output back to the original source — so the debugger and error stack traces…
- Monorepo Tools — Turborepo, Nx, pnpm Workspaces 5 A monorepo holds multiple packages in one repository — typically for a frontend + backend + shared lib, or a design system + multiple consumers.
- Package Managers — npm vs pnpm vs yarn, Lockfile Semantics 5 Three options. npm ships with Node — universal, slowest, fine. pnpm is the modern senior pick — fast, disk-efficient (content-addressable store), strict…
- Dev-Server Internals — HMR, Pre-Bundling, Dependency Resolution 4 The dev server is what you live in 9 hours a day; understanding it explains the difference between "1s reload" and "30s rebuild." Key concepts: dependency…