Glossary / Bundlers
Bundlers
A JavaScript bundler analyzes an application's module graph and emits deployable assets, often combining modules, transforming syntax, extracting CSS, optimizing dependencies, and creating chunks. Bundlers bridge source-level module structure and browser or runtime delivery, but their resolver, plugin, and optimization behavior is tool-specific.
Pipeline and outputs
A typical build resolves entry points and dependencies, loads source files, transforms syntax/assets, builds a graph, applies tree shaking, chunks the graph, emits JavaScript/CSS/assets, and may minify or generate source maps. Tools such as Vite, Rollup, webpack, and esbuild make different tradeoffs: dev-server strategy, plugin APIs, code splitting, compatibility targets, and defaults vary by version.
Bundlers can process ESM, CommonJS, TypeScript, CSS, images, and virtual modules through plugins or built-in transforms. They may replace environment constants, define aliases, and treat some packages as external. A source import that works in a bundler may fail in Node or a browser without that build step. Development success does not prove production output is correct.
Engineering decisions
Choose based on application/library needs, supported runtimes, ecosystem plugins, build speed, output control, and maintainability. Keep configuration explicit and avoid overlapping transforms that make debugging difficult. Measure cold/warm build time, output size, parse cost, and runtime performance. Inspect generated chunks, handle asset base paths, and test deployment from the actual static server/CDN configuration.
For libraries, decide ESM/CJS outputs, external dependencies, declaration files, package exports, and side-effect metadata. For apps, define browser targets, chunk strategy, and error handling for lazy chunks. Pin tool versions and upgrade intentionally because defaults and output can change.
Interview questions
- What does a bundler do beyond concatenation? Resolves/transforms a graph, optimizes code, splits chunks, and emits assets.
- Why can bundler code work but Node fail? The bundler may implement aliases, extension resolution, transforms, or globals absent at runtime.
- What is tree shaking? Removing statically analyzable unused code.
- What should be externalized in a library build? Often host/runtime dependencies that consumers should provide, according to package contract.
- How evaluate bundle health? Inspect output and measure transfer, parse/evaluate, chunk behavior, and real build/runtime targets.