From source to a release: transpiling and bundling, tree shaking and minification, splitting and hashing, monorepos and packages, CI gates and previews, flags and trains.
From source files to optimised, hashed chunks.
A tool that follows imports from entry points, transforms each module and emits a small number of optimised files for the browser.
in practiceVite (Rollup or Rolldown), webpack, esbuild, Rspack, Turbopack; the dist folder.
A compiler from one JS dialect to another: TypeScript and JSX to plain JS, or modern syntax down to older targets.
in practiceSWC, esbuild, Babel; the browserslist target that decides what is down-levelled.
Removing exports that nothing imports, based on the static structure of ES modules.
in practiceImporting one lodash-es function without the rest; sideEffects: false in package.json enabling it.
Code that runs on import (polyfills, CSS imports, global registration); bundlers must keep it, so it blocks tree shaking unless declared absent.
in practicesideEffects: ["*.css"] in package.json; a library that ships everything because of one top-level call.
Breaking the bundle into chunks loaded on demand, usually at dynamic import() boundaries such as routes.
in practiceReact.lazy(() => import("./Settings")); a smaller entry chunk and faster first load.
Output files are named by a hash of their contents, so they can be cached forever and a change produces a new URL.
in practiceapp.3f9a1c.js with Cache-Control immutable; index.html not hashed and revalidated.
Shrinking JS and CSS without changing behaviour: removing whitespace, shortening names, folding constants, dropping dead branches.
in practiceTerser, esbuild and SWC minifiers; why production stack traces need source maps.
A file mapping minified output back to original sources, lines and names, so debuggers and error tools show your code.
in practiceReadable stack traces in Sentry; upload maps privately, do not serve them publicly.
Code that implements a missing platform API in older browsers, loaded only when needed.
in practicecore-js; a polyfill for structuredClone; differential serving to skip them on modern browsers.
Loading separately built and deployed bundles into one app at runtime, sharing dependencies between them.
in practiceMicro-frontends at large companies; version skew of shared React a common failure.
Hot module replacement: swapping a changed module into the running app without a full reload, preserving state where possible.
in practiceVite and React Fast Refresh in development; full reloads when a module cannot be hot-swapped.
A visualisation of what is in each chunk and how big, to find heavy or duplicated dependencies.
in practicerollup-plugin-visualizer, webpack-bundle-analyzer, source-map-explorer treemaps.
From a repository of packages to a gated, previewed, flagged release.
Many packages and apps in one repository with shared tooling, atomic cross-package changes and one version of the truth.
in practicepnpm workspaces, Nx, Turborepo, Bazel; Google, Meta and Microsoft's main repositories.
Monorepo tools model builds and tests as a dependency graph and skip tasks whose inputs are unchanged, locally or from a remote cache.
in practiceTurborepo and Nx "cache hit" output; CI times that stay flat as the repo grows.
Running builds and tests only for projects affected by a change, computed from the dependency graph.
in practicenx affected, turbo --filter=...[origin/main]; keeping CI fast in big repos.
MAJOR.MINOR.PATCH: breaking changes bump major, features minor, fixes patch; ranges like ^1.4.0 accept compatible updates.
in practiceDesign systems communicating breaking changes; caret ranges pulling surprise minor versions.
A file recording the exact resolved version of every dependency, so every install produces the same tree.
in practicepackage-lock.json, pnpm-lock.yaml; npm ci and frozen lockfiles in CI; supply chain reviews.
A dependency a library expects the host app to provide (React for a component library), so only one copy exists.
in practiceDuplicate React errors ("invalid hook call") when a library bundles its own.
A package shipping both ES modules and CommonJS via the exports map, so it works in both module systems.
in practiceThe "exports" field with import and require conditions; the dual-package hazard of two instances.
Values substituted into the bundle at build time (import.meta.env.VITE_*, process.env.NEXT_PUBLIC_*); public by definition.
in practiceAPI base URLs per environment; never secrets, because they end up in the shipped JS.
The automated checks on every change: install, typecheck, lint, test, build, size and performance gates, preview deploy.
in practiceGitHub Actions workflows; required checks blocking merge.
A deployed copy of each pull request at its own URL, for review, end-to-end tests and lab performance runs.
in practiceVercel and Netlify previews; Lighthouse CI against the preview.
A runtime switch that turns code paths on or off per user, cohort or percentage without a deploy.
in practiceDark launches, kill switches, gradual rollouts, A/B tests; stale flags as debt.
Shipping on a fixed schedule with whatever is ready, behind flags, through staged rings, rather than releasing per feature.
in practiceWeekly web trains and mobile store releases; rings from employees to 1% to 100%.