Bundlers like Vite, webpack, and esbuild transform source files into optimized bundles for the browser, with Vite revolutionizing the developer experience by serving native ES modules in development and using Rollup for production builds.
Vite serves native ES modules to the browser and transforms files on demand with esbuild, enabling near-instant startup regardless of application size.
Entry points define the dependency graph root, loaders transform non-JS files, plugins extend capabilities, and output configuration controls bundle generation.
Static analysis of ES module import/export statements to eliminate unused code from the final bundle — only works with ESM, not CommonJS require().
Dividing output into multiple chunks loaded on demand reduces initial bundle size and improves page load performance through lazy loading.
Written in Go with native parallelism, esbuild is 10-100x faster than JavaScript-based tools and is used by Vite for fast development transforms.
A JavaScript bundler takes your source code — which may span hundreds of files with import statements, JSX, TypeScript, CSS modules, and other non-browser-native formats — and produces optimized output files that browsers can execute. Understanding how bundlers work is essential for debugging build issues, optimizing performance, and making informed tooling decisions.
Browsers historically could not handle hundreds of individual HTTP requests for each module in a large application. Bundlers solve this by combining modules into fewer files, resolving dependencies, and applying transformations. Even with HTTP/2 multiplexing, bundling remains important for tree-shaking, code splitting, and applying optimizations that reduce total download size.
webpack: The Established Standard
webpack pioneered the modern bundler approach. Its core concepts are: entry (starting point for the dependency graph), output (where to write bundles), loaders (transform non-JS files like CSS, images, TypeScript), and plugins (extend webpack's capabilities like HTML generation, code splitting, minification). webpack builds a complete dependency graph, then outputs optimized bundles. The downside is startup time — webpack must process the entire application before serving anything in development, which becomes painfully slow in large projects.
Vite: Native ESM Development
Vite took a fundamentally different approach to development servers. Instead of bundling everything upfront, Vite serves source files as native ES modules using the browser's built-in import support. When you request a page, Vite only transforms the files that page actually needs, on demand. This means startup is nearly instant regardless of application size. Vite uses esbuild for fast TypeScript/JSX transformation during development, and Rollup for optimized production builds. Hot Module Replacement (HMR) is also faster because Vite only needs to invalidate the changed module and its direct importers, not rebuild the entire bundle.
esbuild: Speed Through Native Code
esbuild is written in Go and is 10-100x faster than JavaScript-based bundlers. It achieves this through parallelism, efficient memory usage, and avoiding unnecessary AST-to-string conversions. However, esbuild intentionally lacks some features that webpack and Rollup provide (like advanced code splitting and plugin-based asset handling), so it is often used as a transformation layer within other tools rather than as a standalone production bundler.
Rollup: Library Bundling
Rollup excels at producing clean, optimized bundles for libraries. It pioneered tree-shaking (dead code elimination based on ES module static analysis) and outputs multiple formats (ESM, CommonJS, UMD). Vite uses Rollup internally for production builds because of its superior tree-shaking and output optimization.
Tree-shaking eliminates unused exports by analyzing static import/export statements — it only works with ES modules, not CommonJS require(). Code splitting creates separate chunks loaded on demand, reducing initial bundle size. Source maps connect transformed code back to original source for debugging. Understanding these concepts and how different bundlers implement them is commonly tested.
Vite is fast in development because it does not bundle — it serves native ES modules. webpack is slower because it builds the entire dependency graph upfront. In production, both produce optimized bundles (Vite via Rollup, webpack via its own optimizer). The development experience difference is the key innovation.
Fun Fact
esbuild's creator Evan Wallace (co-founder of Figma) wrote the bundler in Go specifically because JavaScript was too slow. The initial benchmark showed esbuild bundling a large project in 0.37 seconds compared to webpack's 41.53 seconds — a 112x speedup.