The frontend build tooling landscape has consolidated significantly. The dev server experience that took two minutes to start in 2020 now starts in 200ms. The interview probes whether you understand the modern stack and the trends.
The 2026 picture
- Vite: dominant for SPA and most React apps. Esbuild for dev, Rollup for production. Fast.
- Turbopack: Vercel’s Rust-based bundler. Powers Next.js dev server. Improving rapidly.
- Webpack: still in legacy codebases. New projects rarely pick it.
- Rspack: Rust port of Webpack. Drop-in replacement, much faster.
- esbuild: the underlying speed demon. Used internally by Vite, tsx, and others.
Why dev server speed matters
The compounding effect of slow tooling: every save costs 5 seconds × 100 saves per day = 8 minutes of waiting × 200 working days = 27 hours per year per developer. Multiply by team size.
Modern tooling targets sub-100ms HMR (Hot Module Replacement). Code change → screen update in under 100ms.
Vite
The dominant choice. Architecture:
- Dev server uses native ESM — modules loaded by the browser directly, no bundling
- esbuild for transforms (TypeScript, JSX)
- HMR is granular — only changed module reloads
- Production build uses Rollup for code splitting and tree shaking
Trade-off: cold start is fast, but HMR can be slower for very large apps because module dependency analysis runs in the browser.
Turbopack
Designed for the next generation of large apps. Architecture:
- Rust-based; integrated with Next.js
- Function-level caching — only re-build what changed
- Goal: Webpack-compatible API but 10x faster
Currently still maturing; default in Next.js 15+ for dev mode. Production bundling is still being stabilized.
Production builds
Production tooling differs from dev tooling. The trade-off shifts:
- Optimization (tree shaking, code splitting, minification) matters more than speed
- Output size matters
- Compatibility (older browsers) matters
Vite uses Rollup for production. Turbopack uses internal Turbopack. Webpack uses webpack.
Code splitting
Split the bundle so users download only what they need:
- Route-based splitting: each route is a chunk
- Component-level: lazy-load heavy components (charts, editors)
- Vendor splitting: separate vendor code from app code (better long-term caching)
Tree shaking
Dead code elimination at build time. Removes unused imports.
Tree shaking works only for ESM. CommonJS is opaque to bundlers. Side-effect-free declarations help — set "sideEffects": false in package.json.
Bundle analysis
Always run bundle analyzers. Tools:
- vite-bundle-visualizer
- webpack-bundle-analyzer
- rollup-plugin-visualizer
Look for: unexpected libraries, duplicate dependencies, large vendor chunks.
Source maps
Always ship source maps for production:
hidden-source-map: built but not referenced (loaded by error trackers)- Upload to Sentry or similar for stack-trace decoding
TypeScript
Modern bundlers transform TypeScript via esbuild or swc — much faster than tsc. The TypeScript compiler runs only for type-checking (in CI or in IDE).
Rule: never use tsc to bundle for production. Use Vite/Turbopack/Webpack with TypeScript transform.
The dev/prod divergence problem
Bug: dev server works, production build fails. Causes:
- Different module resolution
- Different transforms (e.g., dev uses esbuild, prod uses Rollup)
- Tree shaking differences
- Source map generation differences
Mitigation: run production builds in CI on every PR, not just at release.
Should I use Webpack in 2026?
For new projects: no. Vite or Turbopack are easier and faster.
For existing Webpack projects: migration to Rspack (Webpack-compatible Rust port) is often the lowest-friction speed-up.
Frequently Asked Questions
What about Parcel?
Lost mainstream momentum. Still used in some codebases; new projects pick Vite or Turbopack.
How do I configure Vite for a complex app?
Plugin ecosystem covers most needs. For genuinely custom build steps, Vite’s plugin API is reasonable. Avoid: rebuilding Vite from scratch.
What is the future of bundling?
Native ESM in browsers reduces the need for bundling. But code splitting, tree shaking, and asset processing keep bundlers relevant. Speed is the main axis of improvement.