TaskPure-theory lesson — match the tool to the use case. No code change needed.
Bundlers in 2026: Vite, esbuild, or nothing
75 XP8 min
Theory
What a bundler actually does
Three jobs:
- Resolve bare specifiers —
import React from "react"→ actual file from node_modules. - Concatenate + minify — one HTTP request instead of fifty, fewer bytes on the wire.
- Transform syntax — JSX → JS, TypeScript → JS, SCSS → CSS.
Pre-2020 we used Webpack with megabyte config files. In 2026 you almost never write a bundler config by hand.
The current shortlist
| Tool | Best for |
| Vite | App with HMR (React/Vue/Svelte/Lit). Zero-config dev server, rollup for prod build. |
| esbuild | Library build, CLI tool. Single Go binary, ~100× faster than Webpack. |
| tsc | Pure TypeScript lib. Output is JS, no bundling — just transpilation. |
| Nothing | Tiny app + import maps (C3-06). Production-viable for <50KB apps. |
| Webpack | Legacy app you inherited. Don't start new projects here. |
| Turbopack / Rspack | Bleeding-edge experiments at scale (Vercel / Mozilla). Production-ready for some teams. |
When to use which
- You're building a Next.js / Remix / Astro app — they pick a bundler for you. Don't fight it.
- You're building a SPA from scratch in 2026 — Vite. Default React/Vue/Svelte templates start here.
- You're publishing an npm library — esbuild or tsup (wraps esbuild). Output ESM + types.
- You're doing a personal project < 50KB — try no-bundler with import maps. It's surprisingly liveable.
The bundle-analysis habit
After every release: npm run build && open dist/stats.html (most bundlers ship a stats reporter). Look for surprise modules eating MB. Common culprits: moment (use date-fns), full lodash (use lodash-es + tree-shaking), polyfills you don't need on modern browsers.
🔒
Sign up to start coding
Theory is open to everyone. The interactive editor, live preview, and check are unlocked with a 7-day free trial — card required, cancel anytime.
Sign up — free trial →First 10 lessons in each track are free. No card needed for those.