Why Bundlers?

The Problem Bundlers Solve

In the early web, you'd include scripts with <script> tags:

<script src="jquery.js"></script>
<script src="lodash.js"></script>
<script src="myapp.js"></script>
<script src="utils.js"></script>

Problems with this:

• Global scope pollution — every script shares the window namespace
• Dependency order — you have to load dependencies in the right order manually
• Performance — each file = a separate HTTP request (slow!)
• No modules — no import/export
• No transforms — can't use TypeScript, JSX, or modern CSS

A bundler solves all of this.

What a Bundler Does

At its core, a bundler:

1. Starts at an entry point (e.g., index.js)
2. Follows all imports — builds a dependency graph
3. Transforms source files — TypeScript → JS, JSX → JS, SCSS → CSS
4. Bundles — combines related code into output files
5. Optimizes — minifies, tree-shakes dead code, splits into chunks

Dependency Graph

The bundler builds a tree (actually a DAG — directed acyclic graph) of all your modules:

// index.js
import App from "./App";     // entry depends on App
import "./styles.css";        // and on CSS

// App.jsx
import { fetchUsers } from "./api/users"; // App depends on users.js
import { formatDate } from "./utils/format"; // and on format.js

The bundler statically analyzes these imports, discovers every module, and includes only what's needed.

Tree Shaking

Tree shaking eliminates dead code — exports that are imported but never used:

// math.js
export function add(a, b) { return a + b; }
export function sub(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }

// app.js
import { add } from "./math.js"; // only uses add

// After tree shaking, sub and multiply are not included in the bundle!

Tree shaking requires:

• ES module syntax (import/export) — CJS (require) is dynamic and can't be tree-shaken reliably
• "sideEffects": false in package.json to tell bundlers the package has no side effects

Code Splitting

Large apps don't need to load all code upfront. Code splitting creates multiple chunks:

// app.js
import React from "react";

// This component is dynamically imported — it gets its own chunk
const HeavyChart = React.lazy(() => import("./HeavyChart"));

// Dashboard only loads when the user navigates there
const Dashboard = React.lazy(() => import("./Dashboard"));

Webpack/Vite will create:

• main.js — core app (~50KB)
• HeavyChart.js — loaded lazily (~200KB)
• Dashboard.js — loaded lazily (~80KB)

The user downloads the minimum needed upfront.

Loaders and Plugins

Bundlers extend with plugins/loaders for handling different file types:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      { test: /\.tsx?$/, use: "ts-loader" },      // TypeScript
      { test: /\.jsx?$/, use: "babel-loader" },   // Modern JS/JSX
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.(png|jpg)$/, type: "asset/resource" }, // images
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: "./index.html" }),
    new MiniCssExtractPlugin(),
  ],
};

Source Maps

Source maps link minified production code back to your original source, making debugging possible:

The Main Players

Development vs Production

Bundlers behave differently in each mode:

Development:

• Fast rebuilds (only recompile changed files)
• Source maps for debugging
• Hot Module Replacement (HMR) — update the page without full reload
• No minification — readable output

Production:

• Full optimization pass
• Minification (remove whitespace, shorten names)
• Tree shaking
• CSS extraction to separate files
• Asset hashing (e.g., main.a3f2d1.js for cache busting)

Key Takeaways

• Bundlers solve: module resolution, dependency ordering, transforms, optimization
• Tree shaking removes unused exports — requires ESM (not CommonJS)
• Code splitting creates multiple chunks for lazy loading
• Loaders/plugins extend bundlers to handle TypeScript, CSS, images, etc.
• Dev mode = speed + DX; Production mode = optimization + performance
• Main options: Webpack (mature), Vite (modern), Rollup (libraries), esbuild (speed)