You build React apps: do you even know how?
summary
Shows how a real React build works by building a simple bundler from scratch and producing the single-file IIFE output that Webpack emits, using AST parsing and a dependency graph. Demonstrates concrete tools: Acorn + Terser for parsing and tree-shaking, ESBuild for dev pre-bundling, Rollup for prod, and implements HMR via websockets and chunked code-splitting. Notes Vite’s dev/prod split, a successful Storyblok migration to Vite, and compatibility/security caveats.
AI-written summary · about
chapters (15)
- 0:00Welcome
- 2:18Why system internals matter
- 4:04Why bundlers exist
- 6:53From scripts to ES modules
- 12:08Building dependency graphs
- 15:42Bundler architecture basics
- 17:10Modern bundlers compared
- 19:00Abstract syntax trees in bundling
- 21:32Simple production bundler
- 24:04Tree shaking
- 25:07Code splitting and HMR
- 27:37Vite introduction
- 29:22Vite dev vs prod
- 31:07Vite’s advantages and downsides
- 33:58Conclusion
related talks
26mBundlers a deep dive into modern JavaScript build tools
39mBundlers: a deep dive into modern JavaScript build tools
30mWebpack – The React Parts
48mBuild tools 101
30mTowards a simpler JavaScript ecosystem
38mVite, a New Era of Frontend Tooling?
39mMaking Your React Apps Perform At Scale
20mRemixing the Bundler