Build Tools
Date: 2026-08-17
The pipeline turning source you can work in into files a browser can run fast. Every build tool does roughly the same stages — the differences are which language they’re written in and how much of the work they skip during development.
A build tool transforms source code into deployable output: resolving imports, transpiling syntax, bundling modules, optimising assets and emitting files.
The stages
SOURCE
│ RESOLVE follow imports, build a graph
│ TRANSFORM TS → JS, JSX → JS, SCSS → CSS
│ BUNDLE combine into chunks
│ OPTIMISE minify, tree-shake, split
│ EMIT hashed filenames, source maps,
│ a manifest
OUTPUT
Every tool does these. What differs is the implementation language, what runs in development, and how configurable each stage is.
Why builds exist at all
Worth stating, because “why not just ship the source” is a reasonable question:
- Syntax the browser doesn’t support — TypeScript, JSX, newer proposals
- Module resolution.
import x from 'lodash'isn’t a URL; something must map it to a file - Fewer, smaller files. Bundling reduces request count; minification reduces bytes — Latency and Bandwidth
- Tree-shaking. Removing exports nobody imports
- Cache-busting. Hashed filenames make assets cacheable forever — Caching Strategies
- Environment substitution. Different API URLs per environment — Environment Configuration
The generations
| Tools | Written in | Dev approach | |
|---|---|---|---|
| Task runners | Grunt, Gulp | JS | Manual pipelines |
| Bundlers | webpack, Rollup, Parcel | JS | Bundle everything, always |
| Native-speed | esbuild, SWC | Go, Rust | Bundle, much faster |
| Dev-server-first | Vite | JS + esbuild + Rollup | Don’t bundle in dev |
The generational shift that mattered was the last one — realising that during development the browser can load ES modules natively, so bundling is unnecessary work — Vite.
Development versus production
The distinction most modern tooling is organised around:
DEVELOPMENT
fast start, fast updates
readable output, source maps
no minification
correctness of the reload matters
more than size
PRODUCTION
smallest, fastest output
build time can be minutes
minified, tree-shaken, split
deterministic and reproducible
These are different enough that using one tool for both is a compromise. Vite’s design is to use different tools for each and accept the small risk that dev and production behave differently.
What to actually configure
Most of a modern build works untouched. The decisions worth making deliberately:
- Browser targets. This drives how much gets transpiled and polyfilled, and it’s the single biggest lever on output size — Transpilation
- Code splitting boundaries — per route at minimum — Code Splitting
- Source map strategy for production — Source Maps
- Asset handling — inline threshold, image formats, font subsetting
- Environment variables, and which are safe to expose — Secrets Management
Everything else is usually a sign of fighting the tool. A build configuration of several hundred lines is a maintenance liability and usually accumulated rather than designed.
Where builds go wrong
- Slow builds. A minute-long production build is fine; a ten-second dev reload is not, and it compounds across every change
- Non-reproducible output. Two builds of the same commit differing means caching can’t work and debugging is guesswork — Build Caching
- Obsolete optimisations. Concatenating everything into one bundle, domain sharding and inlining assets were correct under HTTP/1.1 and are now harmful — HTTP Versions
- Configuration nobody understands, copied from a template three projects ago
- No bundle visibility. Shipping a large dependency by accident is invisible without measuring — Bundle Analysis
The practical position
Use the framework’s default build. Next, Remix, SvelteKit and Astro all ship a configured build that’s better than most hand-assembled ones, and deviating should be a decision with a reason.
For a plain application, Vite is the sensible default — Vite. For a Shopify theme, there may be no build at all, since Liquid renders server-side and the asset pipeline is the platform’s — Shopify.