Modules, bundling and the build

you wrote `import` at the top of the file and the tooling could tell what you used without running anything.

ES module

the package only shipped `require` and your bundler could not shake anything out of it.

CommonJS

you point one tool at an entry file and it follows every import and writes out a handful of files.

Bundler

you imported one helper and the build pulled in a date library you have never used directly.

Module graph

you named the one file the build starts from and everything else was found by following its imports.

Entry point

the build wrote out eleven numbered JavaScript files and the page only requests three of them.

Chunk

you import one function from a library and the other two hundred never reach the bundle.

Tree shaking

the branch behind `if (process.env.NODE_ENV !== 'production')` disappeared entirely from the output.

Dead code elimination

you added `"sideEffects": false` to the package and the bundle got noticeably smaller.

Side-effect-free module

you imported one icon from the package index and the build pulled in every icon it exports.

Barrel file

the settings screen's code is not downloaded until someone actually opens the settings screen.

Code splitting

you wrote `await import('./editor')` and the bundler quietly turned that line into a separate file.

Dynamic import

the chart component loads on first render of the chart, with a fallback shown while it arrives.

Lazy component

you split the dependencies into their own file so a change to your code does not invalidate them.

Vendor chunk

two copies of the same library ended up in the bundle because two packages asked for different versions.

Duplicate dependency

the file is named with a string of hex that changes only when its contents change.

Content hash

you deployed a fix and users kept getting the old file until you changed its name.

Cache busting

the JavaScript is cached for a year because its name guarantees the contents can never change.

Immutable caching

the shipped file is one line, every local variable is a single letter, and the comments are gone.

Minification

the error points at line 4200 of a minified file, and the debugger shows you your original source anyway.

Source map

you wrote modern syntax and the build rewrote it into something older browsers can parse.

Transpilation

you loaded a script that defines the missing method on the global object so the rest of the code can call it.

Polyfill

you imported the replacement as a normal function instead of letting it patch the global object.

Ponyfill

you narrowed the supported browser list and the output shrank without you deleting any code.

Build target

you saved the file and the component updated on screen without losing what you had typed into the form.

Hot module replacement

you generated the treemap and found one dependency taking up a third of the bundle.

Bundle analysis

one deployed application loads a component from another at runtime, over the network, from its own build.

Module federation

three teams each own a section of one page and each deploys their section without the others.

Micro-frontend

you told the browser directly what `react` resolves to and skipped the bundler for that import.

Import map