Build Tools & Bundlers

A bundler takes your source files — TypeScript modules, CSS, images, JSON — and transforms them into a set of optimised assets the browser can load. Understanding what happens inside the build lets you diagnose slow builds, bloated bundles, and production-only bugs.

What a Bundler Does

graph TD
    Entry["Entry Point<br/>src/main.ts"]
    Entry --> Resolve["Module Resolution<br/>import paths → file paths"]
    Resolve --> Transform["Transform<br/>TS → JS, JSX → JS, SASS → CSS"]
    Transform --> Tree["Tree Shaking<br/>Remove unused exports"]
    Tree --> Split["Code Splitting<br/>Dynamic imports → chunks"]
    Split --> Output["Output<br/>dist/ (hashed filenames + source maps)"]

Module resolution follows import statements to build a dependency graph. Tree shaking removes exports that are never imported (requires ES modules — not CommonJS). Code splitting turns dynamic import() calls into separate chunks loaded on demand.

Vite vs Webpack

Vite config example:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
        },
      },
    },
  },
});

esbuild

esbuild is a JavaScript/TypeScript bundler written in Go. It is 10–100x faster than Webpack because it parallelises work across CPU cores and avoids the overhead of JavaScript’s single-threaded event loop.

Vite uses esbuild for two specific jobs:

1. Dev-time transpilation — converting TypeScript and JSX to JS for the browser (per file, no bundling)
2. Dependency pre-bundling — converting CJS dependencies to ESM once on startup

Rollup (not esbuild) handles Vite’s production bundle because Rollup produces smaller, more optimised output.

Source Maps

Source maps are files (.map) that map minified production code back to the original source. They enable readable stack traces in error monitoring tools (Sentry, Datadog) and in the browser DevTools:

// vite.config.ts
build: {
  sourcemap: true,          // inline or .map files — expose source to browser
  sourcemap: "hidden",      // .map files exist but not referenced from bundle
}

Use "hidden" in production — upload the .map files to your error tracker without serving them publicly, so attackers cannot read your source code.

Environment Variables

Bundlers replace environment variable references at build time. Only variables with a specific prefix are exposed to the browser bundle (to prevent accidentally leaking server secrets):

# .env (Vite convention — VITE_ prefix is exposed to the browser)
VITE_API_URL=https://api.example.com
DATABASE_URL=postgres://...   # NOT exposed — no prefix

// In source code
const apiUrl = import.meta.env.VITE_API_URL;

Reading Build Output

After vite build or next build, inspect the output to spot problems:

• Chunk sizes — individual JS chunks above ~150 KB compressed deserve investigation
• Asset hashes — filenames like main.a3f9b2.js confirm cache-busting is working
• Gzip / Brotli sizes — npx vite-bundle-visualizer or webpack-bundle-analyzer shows a treemap of what is inside each chunk

A bloated vendor chunk usually means a heavy library was imported and not tree-shaken. Check for named imports from libraries that only support CJS (which cannot be tree-shaken).

Further Learning

Search these terms to go deeper:

• “Vite documentation guide features” — comprehensive guide to Vite’s dev server, plugins, and build options
• “Rollup tree shaking guide” — how tree shaking works and why it requires ES modules
• “esbuild why is it fast” — esbuild’s own explanation of its architecture and design decisions
• “webpack-bundle-analyzer” — interactive treemap visualiser for understanding what’s in your bundle
• “web.dev code splitting” — practical guide to dynamic import and lazy loading patterns

Build Tools & Bundlers

You write code across dozens of neat files using modern features. But browsers want a few optimized files. A bundler is the machine that packs your source files into browser-ready assets — combining them, converting TypeScript to JavaScript, shrinking them, and more.

What a bundler actually does

Starting from your entry file, it follows all your imports and:

• Bundles many files into a few.
• Converts modern code (TypeScript, JSX) into plain JavaScript browsers understand.
• Tree-shakes — drops code you imported but never used, so the bundle stays lean.
• Splits — separates rarely-used pages into their own files that load on demand.

The end result is small, fast, browser-ready files in a dist/ folder.

The popular tool: Vite

Vite is the modern default. It’s loved because its dev server starts instantly and updates the moment you save. For most new projects (React, Vue, Svelte), you barely need to configure it:

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

The older Webpack does the same job but is slower and more configuration-heavy — you’ll meet it mostly in existing/legacy projects.

Environment variables (and a safety trap)

You’ll often need values like an API URL. The bundler swaps these in at build time — but only variables with the right prefix are shared with the browser:

VITE_API_URL=https://api.example.com   # visible in the browser ✅
DATABASE_URL=postgres://secret         # NOT shared — no prefix

Reading the build output

After a build, glance at the file list:

• Chunk sizes — a single JavaScript file over ~150 KB is worth investigating (probably a heavy library).
• Hashed filenames like main.a3f9b2.js — this is good; it lets browsers cache files safely, since the name changes whenever the content does.

In one sentence

A bundler packs your many source files into a few optimized, browser-ready files (converting, tree-shaking, and splitting along the way) — Vite is the fast modern default, and never put secrets in browser-exposed VITE_* variables.

Want to go deeper?

Switch to Expert mode above for the full Vite-vs-Webpack comparison, esbuild, source maps, and reading bundle analyzers.