We use analytics cookies.We use cookies to analyze site traffic and improve your experience.
Loading...
System Design Masterclass · Web Content Delivery
Free preview: the first 2 parts of this 8-part lesson.
Already bought the course? Sign in to read the whole lesson.
this lesson is part of
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design courseread the rest of this lesson in
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design coursein Web Content Delivery
This lesson is part of the full System Design Masterclass. Unlock it along with 769 other lessons for a one-time payment.
One-time payment by card or PayPal
Get Lifetime AccessOne-time payment: UPI, card or netbanking
Get Lifetime Access18 Foundation lessons are free, no payment needed. Try them now
It is easy and good
“It is really nice and good Please join the course”
Your source code has TypeScript. Browsers do not run TypeScript. Your CSS uses Tailwind utility classes. Browsers need the final CSS output. Your project has 200 JavaScript files across 50 folders. Shipping 200 separate requests to load them would take 10+ seconds on a typical connection.
The asset pipeline is the build system that transforms your development source code into optimized files that browsers can actually execute. It transpiles TypeScript to JavaScript, compiles SCSS to CSS, bundles hundreds of modules into a few files, minifies everything, and stamps each file with a content hash so CDNs can cache it indefinitely.
Without a pipeline, a modern web app does not work. With a bad pipeline, it works but ships 5x more bytes than necessary. LinkedIn reduced their JavaScript bundle by 60% (from 5MB to 2MB) by restructuring their asset pipeline, and their mobile page load time improved by 40%.
Every asset pipeline, whether it is Webpack, Vite, Turbopack, or esbuild, does the same five things in roughly this order:
1. Resolution. The bundler reads your entry point (index.tsx) and follows every import statement to build a dependency graph of every module your app uses. A medium React app might resolve 2,000-5,000 modules including node_modules.
2. Transformation. Each file is transformed to browser-compatible code. TypeScript becomes JavaScript. JSX becomes React.createElement calls. SCSS becomes CSS. Modern JavaScript syntax (?., ??) is transpiled for older browsers. This step uses tools like Babel, SWC, or esbuild.
3. Bundling. The resolved modules are combined into a small number of output files (chunks). Instead of 2,000 requests, the browser downloads 3-10 chunks. The bundler uses code splitting to create separate chunks for different routes so the user only downloads code for the page they visit.
4. Optimization. Minification removes whitespace, shortens variable names, and eliminates dead code. Tree shaking removes unused exports. CSS purging removes unused utility classes. A 1MB source file typically minifies to 300-400KB and gzips to 80-120KB.
5. Hashing. Each output file gets a content hash in its filename: app.a1b2c3.js. If the file content changes, the hash changes, and the browser fetches the new version. If nothing changes, the browser uses its cache. This makes Cache-Control: max-age=31536000 (1 year) safe because the filename itself is the cache key.