Skip to content

Build Tools and Bundlers

The machinery that transforms source code into production assets. Webpack, Vite, Rollup, esbuild, SWC, Turbopack -- when each is the right choice and why.

1
Webpack Module Graph and Plugin System
intermediate

How webpack constructs a dependency graph from your entry points, transforms files through loaders, taps into compiler hooks with plugins, splits chunks, and produces your final bundle.

20 min read
2
Vite Dev Server and Production Builds
intermediate

Why Vite's native ESM dev server starts instantly regardless of app size, how esbuild pre-bundles dependencies, how HMR works over ESM, and why production uses Rollup.

18 min read
3
Rollup for Library Authoring
intermediate

Why Rollup is the go-to bundler for libraries — ESM-first philosophy, best-in-class tree shaking, multiple output formats, and the preserveModules strategy.

16 min read
4
esbuild and SWC: Native Speed
intermediate

Why Go and Rust-based build tools are 10-100x faster than JavaScript-based ones — esbuild's architecture, SWC as a Babel replacement, benchmarks, and when to use each.

17 min read
5
Turbopack and Next-Gen Bundlers
intermediate

The next generation of bundlers built in Rust — Turbopack's incremental computation model, Rspack's webpack compatibility, and why Rust is winning the build tooling race.

16 min read
6
Babel AST Transforms and When You Need It
intermediate

Babel's parsing-transform-generate pipeline, AST structure, presets vs plugins, when Babel is still essential, and when esbuild/SWC have replaced it.

17 min read
7
Bundle Analysis and Optimization
intermediate

How to analyze your JavaScript bundles, identify bloat, verify tree shaking, detect duplicate dependencies, and set performance budgets that prevent regression.

18 min read
8
Dynamic Imports and Code Splitting
intermediate

How dynamic import() creates split points, route-based and component-level splitting strategies, prefetching patterns, and how to measure split effectiveness.

17 min read
9
Module Federation
intermediate

Share code between independently deployed applications at runtime — host/remote architecture, shared dependency negotiation, version management, and when not to use it.

18 min read
10
Source Maps in Development and Production
intermediate

How source maps work under the hood (VLQ encoding, mappings), devtool options in webpack, production source map strategies, and debugging with Chrome DevTools.

16 min read
11
Quiz: What Gets Bundled?
intermediate

Test your understanding of bundling behavior, tree shaking, code splitting, source maps, module federation, and build tool differences with these 10 challenging questions.

12 min read