Webpack, Vite, Bundlers

2020. Evan Wallace publishes esbuild - a bundler written in Go. First benchmark: esbuild bundles three.js in 0.37 seconds. Webpack 4: 54.5 seconds. Difference: 100x. At that moment it became clear: JavaScript tooling written in JavaScript is the bottleneck. The era of Go and Rust tools began: esbuild, SWC, Turbopack.

• **Vercel Next.js**: Turbopack (Rust) replaces Webpack in development - 700x faster HMR in large projects
• **Vite** (6M weekly downloads): the standard for new React/Vue/Svelte projects, used in Nuxt 3, SvelteKit, Astro
• **Shopify Hydrogen**: Vite + React Server Components for e-commerce - code splitting by default for each product

Bundling: From Thousands of Files to a Few

2010. A React application with 847 JS files. Without a bundler: 847 HTTP requests on load. With HTTP/1.1 - 6 parallel connections, sequential waterfall. Load time: 8-12 seconds. With webpack: 1-3 files, parallel load, 1.2 seconds. A bundler is not optional - it's a required tool.

A bundler builds a dependency graph: starting from the entry point (index.ts), it recursively resolves all import/require statements, creates a dependency graph, and merges into bundles. Webpack (2012) - the first mainstream bundler, configuration-heavy, flexible. Vite (2020) - development server on native ES modules + Rollup for production build. esbuild (2020) - written in Go, 10-100x faster than Webpack.

esbuild was written in Go by Evan Wallace (ex-Figma). Parallel parsing using Go goroutines vs JavaScript single-thread. Shared AST between passes vs separate ASTs. Result: TypeScript compilation 10x faster than tsc, bundling 100x faster than webpack. Vite uses esbuild for pre-bundling node_modules (CommonJS -> ES modules) and for TS/JSX transformation in dev mode.