Build Tooling & Bundling
Modules to dependency graph to transforms to chunks. Code splitting, tree shaking, TypeScript, polyfills versus transpilation, source maps, and what your users download.
Entry points become a dependency graph, the graph is transformed, and the graph is cut into chunks. Every bundler is an implementation of those three ideas.
Vite, Webpack, Rollup, esbuild and SWC as implementations of the same graph-and-chunks model, separated by dev-server strategy, build speed, plugin surface and output control.
Cutting one graph into an initial chunk plus route and feature chunks — and the two failures on either side of it: shared code duplicated, and a waterfall of tiny chunks.
Deferring routes, components, images and expensive modules until they are needed — and the loading state, the flash and the error path that every deferral creates.
Static module analysis can allow unused exports to be dropped — and five specific things routinely stop it: side effects, a wrong `sideEffects` flag, CommonJS interop, barrel re-exports and dynamic access.
Reading a treemap: attributing bytes to modules, finding the dependency nobody meant to add, and separating "large" from "large and on the critical path".
Minification rewrites the artifact and is permanent. Compression encodes the response and is undone by the browser. They compose, they are configured in different places, and they are not alternatives.
Static structure known before execution versus a runtime function call that returns an object — and why the first is what makes tree shaking and named-export analysis possible at all.
Transpilation rewrites syntax an engine cannot parse. A polyfill supplies an API an engine does not have. Neither can do the other's job.
The mapping from the bundle that shipped back to the source you wrote. Without one, a production stack trace names a minified letter on line 1.
Parse, type check, emit. The types are erased before anything runs, so nothing they promised is enforced at the network boundary.