Wiki Article · Cinematic

Bundling

Bundling ek build process hai jisme multiple source files (JavaScript modules, CSS files, images,…

Overview

Bundling — Quick Facts

📌

Key: Value

🎯

Topic: Bundling

⚡

Category: Performance / Build Tools / Web…

🔑

Type: Build-Time Optimization Process

Topic 1

Courier Package Analogy

💡

100 alag-alag courier parcels…

🔑

100 delivery trucks nikaalte ho…

⚡

Har truck ka overhead hota hai:…

🎯

Customer ko 100 baar door khol ke…

Topic 2

Bundling Pipeline — Mermaid Diagram

💡 `mermaid flowchart TB A["📁 Source Files<br/>JS/TS modules<br/>CSS/SCSS files<br/>Images,…

Topic 3

The Problem — Why Bundling Exists

💡

HTTP/1.1 me browser per domain…

🔑

200 files download karne hain →…

⚡

Har connection ka overhead: DNS…

🎯

Small file (2 KB) ke liye bhi…

Topic 4

Core Concepts

💡

Starting file(s) jahan se bundler…

🔑

Typically: src/index.js ya…

⚡

Multiple entry points possible:…

🎯

Bundler entry point se shuru hoke…

Topic 5

Bundler Tools Comparison

💡

esbuild: ~0.3 seconds (medium…

🔑

SWC/Turbopack: ~0.5 seconds

⚡

Vite (dev mode): near-instant (no…

🎯

Rollup: ~3 seconds

Topic 6

Tree Shaking — Dead Code Elimination

💡

ES modules (import/export)…

🔑

CommonJS (require()) dynamic hai —…

⚡

Bundler dependency graph traverse…

🎯

Kuch modules import hote hi side…

Topic 7

Code Splitting & Lazy Loading

💡

Ek hi massive bundle (2 MB) → user…

🔑

Lekin user shayad sirf home page…

⚡

Code splitting: bundle ko multiple…

🎯

Application code frequently change…

Topic 8

Minification & Compression

💡

Source code me whitespace,…

🔑

Minifier: calculateTotalPrice → a,…

⚡

JS minifiers: Terser (most…

🎯

CSS minifiers: cssnano, clean-css

Topic 9

Source Maps

💡

Bundled + minified code unreadable…

🔑

Source map ek mapping file hai jo…

⚡

Browser DevTools source map use…

🎯

File: main.js.map (.map extension)

Topic 10

Hot Module Replacement (HMR)

💡

Developer code change karta hai →…

🔑

Developer code change karta hai →…

⚡

CSS change: immediately reflected…

🎯

Component change: component…

Topic 11

Bundle Size Optimization Strategies

🎯 | Strategy | What It Does | Impact | Effort | |---|---|---|---| | Tree shaking | Remove…

Topic 12

Bundling vs No-Bundling (Unbundled Development)

💡

Development: Unbundled / ESM-based…

🔑

Production: Bundled + optimized…

⚡

This is exactly what Vite does:…

Topic 13

Common Bundling Patterns

💡

Entry point: src/index.js

🔑

Output: main.js + vendor.js +…

⚡

Route-based code splitting: each…

🎯

Typical total: 5-15 output files

Topic 14

Historical Context

💡

Developers manually wrote <script>…

🔑

Build tools like Grunt (2012) aur…

⚡

concat.js = sab JS files literally…

🎯

CSS: manually combine ya simple…

Topic 15

Dekhiye Yeh Bhi

💡

[[webpack]] — Most popular…

🔑

[[esbuild]] — Go-based ultra-fast…

⚡

[[Rollup]] — ES module bundler and…

🎯

[[Vite]] — Modern frontend build…

Comparison

Bundler Tools Comparison

⚖️

webpack: Tobias Koppers

⚖️

esbuild: Evan Wallace

⚖️

Rollup: Rich Harris

Comparison

Bundling vs No-Bundling (Unbundled Development)

⚖️

HTTP requests: Few (1-5 bundles)

⚖️

Build time: Slow (seconds-minutes on…

⚖️

Dev experience: Slow initial build, HMR…

Diagram

Visual Flow

📊 Diagram visualization — details in narration

Quick Quiz

Quiz — Question 1

Bundling ka sabse sahi definition kya hai?

Quick Quiz

Quiz — Question 2

Bundling ka 'Topic' kya hai?

Complete! 🎉

Bundling Complete!

Aliens Wiki · HIEN · Cinematic Knowledge

✅