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.
Bundling Concepts: tree shaking code splitting is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Tree Shaking — Dead Code Elimination
Tree shaking analyses the module graph and removes exports that are never imported. Only ES module static imports enable tree shaking — CommonJS require() is dynamic and can't be statically analysed.
// utils.js
export const add = (a, b) => a + b; // used → included
export const multiply = (a, b) => a * b; // never imported → removed
// app.js
import { add } from './utils.js';
console.log(add(2, 3));Side Effects and sideEffects: false
If your library has no side effects (pure re-exports), add "sideEffects": false to package.json. This tells bundlers they can safely remove any file from your package that isn't imported.
// package.json of a library:
{
"sideEffects": false
// or list files with side effects:
"sideEffects": ["./src/polyfills.js"]
}Code Splitting
Code splitting breaks the bundle into multiple chunks loaded on demand. The main chunk stays small for fast initial load. Secondary chunks load only when needed (lazy routes, feature toggles).
Entry Point Splitting
Multi-page apps have multiple entry points, each producing its own bundle. Shared code (e.g., React) is automatically extracted into a shared chunk.
Dynamic Import Splitting
Every dynamic import() call creates a split point. The bundler generates a separate chunk for the lazily-loaded module and all its unique dependencies.
// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));Vendor Chunking
Node_modules code rarely changes. Extract it into a vendor chunk with a long cache TTL. Users who have cached the vendor chunk only re-download the app chunk on updates.
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: { vendor: ['react', 'react-dom'] }
}
}
}Minification
Minifiers (esbuild, terser) remove whitespace, rename variables to single letters, and apply other reductions. A typical React app shrinks 60–70% after minification.
Content-Based Hashing
Bundlers add a hash of the file's content to the filename: index-a1b2c3.js. When content changes, the hash changes, the filename changes, and the browser fetches the new file. Unchanged chunks are cached indefinitely.
Source Maps
Source maps map minified output back to your original source code. They're generated separately (not sent to users) and used by DevTools for debugging. Enable with build.sourcemap: true.
Quick Check
What is the primary requirement for tree shaking to work?
Recap: Bundling Concepts
Bundlers resolve the module graph, tree-shake unused exports (needs static ESM), split code into chunks for lazy loading, extract vendor code for caching, minify output, and add content hashes for cache busting. Source maps enable debugging of minified code.
Frequently asked questions
Is the “Bundling Concepts: tree shaking code splitting” lesson free?
Yes — the full text of “Bundling Concepts: tree shaking code splitting” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “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. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Bundling Concepts: tree shaking code splitting” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
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