Introduction to Bundlers (Vite / Webpack)

This is a complete, architecturally-focused guide to modern module bundlers. You won't just learn configuration syntax; you will understand how bundlers work under the hood, how code splitting reduces load times, how tree shaking eliminates dead code, and how to optimize assets for production. We prioritize deep understanding, real-world optimization patterns, and production-grade build pipelines.

• • Module bundling: how bundlers work under the hood
• • Vite: next-generation frontend tooling with esbuild and Rollup
• • Webpack: configuration, loaders, plugins, and optimizations
• • Code splitting: reducing initial bundle size
• • Tree shaking: eliminating dead code from bundles
• • Asset optimization: images, fonts, CSS, and JavaScript
• • Production builds: caching, chunking, and deployment

20 deep-dive theory modules organized into 5 progressive checkpoints — from bundling foundations through advanced production optimization. Each module includes architectural explanations, real-world configuration examples, performance analysis, and comprehensive quizzes.