Learn the concept
Bundling & Code Splitting
Minification removes unnecessary characters (whitespace, comments) from code to reduce file size. Bundling combines multiple files into fewer files to reduce HTTP requests. Both reduce load times - bundlers like webpack, Vite handle this automatically.
Minification:
Bundling:
Modern Bundlers:
Results:
// Before minification (readable)
function calculateTotal(items) {
// Calculate the sum of all item prices
const total = items.reduce((sum, item) => {
return sum + item.price;
}, 0);
return total;
}
// After minification (production)
function calculateTotal(t){return t.reduce((t,e)=>t+e.price,0)}
// Typical file size reduction:
// Original: 1.2 MB
// Minified: 450 KB (63% reduction)
// Gzipped: 120 KB (90% reduction)
// Common minification tools:
// - Terser (JavaScript)
// - cssnano (CSS)
// - html-minifier (HTML)Where all JavaScript, CSS, and HTML files are minified and bundled into a few optimized files to reduce download size and network requests, leading to faster initial load times.
By using a bundler with code-splitting capabilities, allowing different teams to develop features independently while ensuring that users only download the JavaScript and CSS relevant to the pages they visit.
Where components are bundled and tree-shaken to remove unused code, providing consumers with a lightweight and performant library.
Configure a basic project to use Webpack or Vite for bundling and minification of JavaScript and CSS assets.
Refactor an existing web application to implement code splitting using dynamic `import()` statements, loading non-essential components or routes on demand.
GitHub uses minification and bundling extensively to optimize the performance of its web interface, ensuring that the large codebase is delivered efficiently to millions of users worldwide.
Next.js, a framework developed by Vercel, leverages advanced bundling and minification techniques under the hood, including automatic code splitting and intelligent asset optimization, to deliver highly performant web applications by default.