Bundlers: a deep dive into modern JavaScript build tools
summary
Built a mini bundler that parses code with acorn, manipulates the AST, uses terser for transforms and emits a working single-file bundle; demonstrates tree shaking and chunked code splitting and implements HMR via a file watcher plus websockets. Compares real tools: Vite (dev uses esbuild, prod uses Rollup), Turbopack/rspack in Rust, Rollup for tiny library bundles and Bun/Deno influence. Notes Vite’s pre-bundling of dependencies, dev/prod divergence, and plans to unify on Rolldown.
AI-written summary · about
chapters (20)
- 0:00JavaScript bundlers intro
- 1:12Why bundlers became essential
- 4:20Legacy JavaScript applications and their problems
- 7:14ES modules changed deps
- 10:14Performance with many files
- 12:03Build a simple bundler
- 14:36Dependency graph basics
- 17:32Modern bundlers vs Webpack
- 19:38Parsing code with abstract syntax trees
- 21:26Plugins and extensions
- 24:18Optimizing with tree shaking
- 25:44Code splitting for load
- 27:08Hot module replacement
- 28:33Vite beyond bundling
- 30:39Vite dev vs prod modes
- 33:09Vite advantages
- 34:14Vite downsides
- 35:39Future of bundlers
- 37:26Companies investing in bundlers
- 38:50Learning resources
related talks
26mBundlers a deep dive into modern JavaScript build tools
45mBundler Bonanza
36mYou build React apps: do you even know how?
20mIntroducing Turbopack: the Turbo-charged bundler
29mModern JavaScript Tooling: Exploring Rolldown, Oxc, and Beyond
36mUnbundling the JavaScript module bundler
25mRolldown: How Vite bundles at the speed of Rust
38mVue.js and Vite Updates