Bundling Concepts: tree shaking code splitting
Understand how bundlers remove unused exports via tree shaking and split output into chunks for faster initial page loads.
What Does a Bundler Do?
A bundler (Vite, webpack, Rollup, Parcel) reads your source files, resolves imports, transforms code (transpile, minify, optimise), and outputs files the browser can efficiently load.
Module Graph
The bundler starts from an entry point and follows every import to build a module graph — a complete map of all the code your app uses. This graph is the basis for all optimisations.
All lessons in this course
- ES Modules: import export and dynamic import
- npm and package.json: dependencies scripts
- Vite: dev server and build
- Bundling Concepts: tree shaking code splitting