Modules, bundlers, and builds
How source files become the optimised JavaScript that ships to a browser.
- Explain why browsers need a build step
- Describe what a bundler does
- Recognise transpiling, minifying, and tree-shaking
The modules lesson showed import/export for organising code. Getting those many
small, modern files to run fast in a browser takes a build step — the
JavaScript equivalent of the build-and-release pipeline. Understanding it
demystifies the tooling every front-end project relies on.
Why a build step
Source code optimised for humans — dozens of small modules, the latest syntax, TypeScript — isn't optimised for delivery. Shipping hundreds of separate files means hundreds of requests; the newest syntax may not run in every browser; types must be removed. A build transforms developer-friendly source into browser-friendly, fast-loading output.
What a bundler does
A bundler (Vite, esbuild, webpack, Rollup) takes your entry file, follows the
import graph, and produces optimised output. Its main jobs:
- Bundling — combine many modules into a few files, reducing requests.
- Transpiling — convert modern syntax (and TypeScript, JSX) into JavaScript that target browsers understand. (This is also what the in-browser code runner on this site would do for TS.)
- Minifying — strip whitespace, shorten names, remove comments to shrink the download.
- Tree-shaking — drop code that's never imported, so unused library functions don't ship. (This is why named exports matter — they let the bundler tell what's actually used.)
The result is a small set of compact files — fewer bytes, fewer requests, broad compatibility — directly serving the performance-profiling lesson's "ship less JavaScript."
Dev vs production builds
Two modes, two goals (the configuration lesson):
- Development: fast rebuilds and good error messages; readable output; source maps so you debug your original code, not the bundle.
- Production: maximum optimisation — minified, tree-shaken, split into cacheable chunks.
Modern tools like Vite and esbuild are fast enough that the build step mostly fades into the background. You rarely configure a bundler from scratch — but knowing what it's doing turns "magic" into something you can reason about and debug.
Where to go next
Builds also handle TypeScript. Next, going deeper into the type system itself: advanced TypeScript.