Bundlers a deep dive into modern JavaScript build tools
summary
Shows a working mini bundler that outputs a single autoexecuting file built by parsing files with regex then adding a plugin system and terser to minify so the demo produces a dist bundle. Explains AST use via acorn and mentions esbuild and Rollup explicitly. Highlights concrete behaviors: Vite uses esbuild for dev prebundling and Rollup for production, enables HMR and code splitting, and warns dev and prod builds can differ and break.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:25Why bundlers exist
- 3:35From global scripts to ES modules
- 5:42Bundlers' purpose
- 6:24Simple bundler architecture
- 7:54Dependency graph creation
- 9:20Implementing require and execution
- 11:36Modern bundler features
- 12:38AST and code parsing
- 14:25Plugins and minification
- 15:30Plugin hooks extension
- 16:54Bundle output optimization
- 18:21Tree shaking concept
- 19:04Code splitting and HMR
- 20:12Modern bundler structure
- 20:32Vite as no-bundler tool
- 21:15Vite dev vs prod mode
- 22:41Vite developer benefits
- 23:24Vite limitations
- 24:28Conclusion
related talks
39mBundlers: a deep dive into modern JavaScript build tools
45mBundler Bonanza
36mYou build React apps: do you even know how?
36mUnbundling the JavaScript module bundler
20mThe Inner Workings of Vite Build
11mJavascript Tooling - The Evolution and Future of JS & Front-end Build Tools
40mBuild Your Own webpack (Live Coding an Ultra-Simplified Example of a Modern Module Bundler in JavaScript)
34mTowards a simpler JavaScript ecosystem