Bundlers and Dev Servers

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Bundler

A build tool that follows your imports and combines many modules into a few optimised files.

Entry point

The first file the bundler starts from, usually src/main.js or index.html.

Tree shaking

Removing exported code that no module imports, so it isn't shipped.

Minification

Making code smaller without changing what it does: removing spaces and comments, shortening names.

Transpiler

A tool that rewrites code into another version of the language, such as modern JavaScript into older JavaScript.

Polyfill

Extra code that adds a missing built-in feature (like a method) to older browsers.

Dev server

A local web server for development that serves your code and reloads changes as you save.

HMR

Hot Module Replacement: updating one changed module in a running page without reloading everything.

Source map

A file that maps built, minified code back to your original source for debugging.

Content hash

A short fingerprint of a file's contents put in its name, so a changed file gets a new name.

1. 1

   Use a tree-shaken function

   In the first example, add import { formatDate } from "./format.js"; to main.js (as a new string in its array). Predict: which name disappears from the "Tree-shaken away" list, and does the order change?

2. 2

   Check the edge cases

   In the second example, add { profile: null } and { profile: { name: 0 } } to inputs. Predict both results for each function before you run it.

3. 3

   Change only a comment

   In the third example, make v2 change only the comment text instead of the number. Predict: does the hash change? Why is that good for caching?

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   A bundler is a build tool that starts at your entry file (often src/main.js), follows every import to build the module graph (Topic 12.1), and writes a small number of output files, usually into a dist folder. Why not ship hundreds of separate modules? Each file is a request, and the browser only discovers a module's imports after downloading it, which causes waterfalls. Bundlers also resolve bare specifiers like "date-fns" from node_modules (Topic 12.3), which browsers can't do on their own, and handle non-JavaScript imports such as CSS, images and JSON.

2. 2

   On the way, the bundler optimises. Tree shaking removes exports nobody imports; it works because ES module imports are static. Minification shortens the code without changing what it does: it removes spaces and comments and renames local variables (totalPrice becomes t). Code splitting creates chunks at each import() (Topic 12.2). Content hashing puts a fingerprint of the file's contents in its name (index-B7xQ2LmA.js), so browsers can cache it for a year and a new version gets a new name. (Hectal's /system-design course covers HTTP caching in depth.)

3. 3

   Transpiling means translating code into a different version of the same language: for example, rewriting user?.name ?? "guest" (ES2020) into older syntax that a 2019 browser understands, or removing TypeScript types (Topic 12.6). The tool is a transpiler (Babel, SWC, esbuild, TypeScript's tsc). You choose the target: which browsers must be supported, often written as a browserslist query such as "> 0.5%, last 2 versions, not dead". Note that transpiling changes syntax only; a missing function such as Array.prototype.toSorted needs a polyfill (extra code that adds it), not a transpiler.

4. 4

   A dev server is a local web server for development. Vite (French for "quick", said "veet") is today's most common choice for new projects. In development it does not bundle your code: it serves each source file as a native ES module and transforms it the moment the browser asks for it, so start-up is near-instant even in large apps. It pre-bundles npm packages once, because some packages contain hundreds of small files. HMR (Hot Module Replacement) swaps an edited module into the running page without a full reload, so you keep your place and state.

5. 5

   For production, vite build runs a full bundler (Rollup in Vite 7, its faster Rust-based successor Rolldown in newer versions) to produce optimised files in dist/, and vite preview serves that folder locally so you can test the real output. Other tools you'll meet: webpack (older, very configurable, still in many company codebases), esbuild and Rollup (used directly, often for libraries), Parcel, Rspack and Turbopack (used by Next.js). The ideas in this topic apply to all of them.

6. 6

   Source maps connect the minified output back to your original files. The bundler writes index-B7xQ2LmA.js.map, and DevTools uses it to show your real code, variable names and line numbers in errors and breakpoints (Phase 13). Without them, a production error points to "line 1, column 48211" of one giant line. Whether to publish source maps is a choice: they make debugging easier but reveal your original source.

• ↔

  A build step gives smaller, faster, cached production files and lets you use npm packages and TypeScript, but adds configuration, a slower feedback loop for some changes, and differences between dev and production to test for.

• ↔

  Targeting very old browsers means more transpiled code and polyfills for everyone unless you ship two builds; a modern baseline target keeps bundles small but drops some users.

• ↔

  Publishing source maps makes production errors easy to read; keeping them private (uploaded only to your error-tracking service) keeps your original source less exposed.

• I can explain why bundling helps: requests, waterfalls, bare specifiers, optimisations.

• I can create a Vite project and use dev, build and preview.

• I can explain tree shaking, minification, code splitting and content hashes.

• I know transpiling changes syntax, polyfills add features, and how a browser target is chosen.

• I know what source maps are for, and that VITE_ variables end up public.