Modern Bundlers and Build Tools

The frontend build pipeline has evolved dramatically. webpack dominated for years; modern tools (Vite, esbuild, Turbopack) are dramatically faster and simpler. The shift is real and ongoing.

This page covers the modern landscape and how to think about it.

What bundlers do

A bundler takes your source code (JS, TS, CSS, etc.) and produces optimized output for the browser:

Older tools (webpack) did all of this in JavaScript. Newer tools use Go, Rust, or Zig — much faster.

The major tools

webpack

The legacy default. Configurable to do anything. Slow on big projects.

Pros: mature; massive ecosystem; handles edge cases. Cons: slow; complex config; legacy patterns.

For new projects, rarely the right choice. For migrating off webpack, see below.

Vite

The modern default. Uses esbuild (Go) for dev; Rollup for production. Dev server starts instantly; HMR is fast.

Pros: very fast; excellent DX; sane defaults. Cons: Rollup-based plugins differ from webpack; some legacy projects struggle to migrate.

For new React, Vue, Svelte projects, Vite is the standard.

esbuild

A bundler written in Go. Extremely fast. Used by Vite, Tailwind, and others as a building block.

Pros: very fast. Cons: limited compared to bundlers using it as a library.

Use directly for tooling, lambda bundling, etc.

Turbopack

Vercel's bundler in Rust. Designed to replace webpack for Next.js. Newer; less mature than Vite but evolving fast.

Used in Next.js 13+ and beyond.

Parcel

Older modern bundler. Zero-config. Less popular than Vite.

Rollup

Library bundler (output libraries, not apps). Used by Vite for production builds. Excellent at clean ESM output.

tsc (TypeScript compiler)

Not a bundler; a transpiler. For pure TS projects, sometimes the build pipeline is just tsc. Slow compared to esbuild/swc for transpilation but produces full TS errors.

Why the shift matters

Speed

Old webpack on a big project: 30-60 second startup; multi-second HMR. Vite: instant startup; sub-second HMR.

For developers, this is transformative. Tighter feedback loop; less waiting.

Simplicity

Modern tools have fewer config knobs because they make better defaults. Vite's config is often a few lines.

ESM

Modern bundlers prioritize ESM (ECMAScript Modules) — the standard module system. Native ESM in browsers and Node.

When you'd still use webpack

For most projects, plan a migration to Vite or stay on Next.js (which now uses Turbopack).

Migration patterns

Webpack → Vite

For most React/Vue projects, the migration is straightforward:

  1. Replace webpack config with Vite config
  2. Update HTML entry point (Vite uses index.html as entry)
  3. Update any webpack-specific syntax (require → import)
  4. Verify production build matches expectations

For complex webpack configs, more work. Start with a small slice; verify; expand.

Legacy → Next.js

Some old SPA projects benefit from migrating to Next.js (which handles bundling, SSR, routing). Larger migration but ends up with more capability.

Specific concerns

Bundle size

Smaller is better. Tools to analyze:

Common bloat:

Code splitting

Don't ship all JS at once. Split by route:

const Lazy = React.lazy(() => import('./LazyComponent'));

Bundlers handle the chunk creation; runtime loads lazily.

Source maps

Production source maps for debugging. Hide from users (private, on internal server) but generate them.

Environment variables

// Vite uses import.meta.env
const apiUrl = import.meta.env.VITE_API_URL;

Different tools have different conventions for what's available at build time vs. runtime.

Build performance

For projects with build performance issues:

  1. Profile: which step is slow? --profile or equivalent.
  2. Update tooling: newer is usually faster.
  3. Reduce work: smaller bundles, fewer entry points, tree-shake more aggressively.
  4. Cache: build caches; CI caches; CDN caches.

For very large monorepos, Turborepo or Nx provides cross-project build caching.

Common failure patterns

Further Reading