Kelly Mears

Tree Shaking

Statically removing exports that nothing imports, shrinking the shipped bundle.

Web Platform2 min read206 words12 out · 7 in
also calledDead code elimination

Tree shaking is dead-code elimination for modules: the Bundler follows imports from the entry point, determines which exports are actually reachable, and drops the rest. It depends on static analysis, which is why it works for ES module syntax and generally does not for dynamic patterns the bundler cannot resolve.

It fails in predictable ways. A module with side effects at import time cannot be dropped even if none of its exports are used. A namespace import may defeat analysis, pulling in an entire library where a named import would have pulled one function. And a barrel file — a module that re-exports a whole directory — is a classic hazard: importing one small value through it can make the bundler include far more than intended, and, worse, can pull a component into an environment where it does not belong.

That last case has a non-obvious consequence beyond size. Routing a value import through a barrel that also exports components means those components load wherever the value is used — including in test environments, where the resulting double instrumentation can corrupt coverage numbers for files nobody touched. The rule of thumb: import a value from the package that owns it, not through an aggregating barrel.

See also10

Code Splitting

Dividing an application bundle so a page downloads only the code it needs.

Web Platform17 connections

Module Graph

The directed graph of imports that decides what code ends up where.

Web Platform22 connections

Test-Driven Development

Writing a failing test first, making it pass, then improving the code with the test as a net.

Testing & Verification12 connections

React Server Components

Components that execute only on the server and never ship their code to the browser.

Web Platform21 connections

Performance Budget

A committed numeric ceiling on a page's cost, enforced automatically.

Web Platform26 connections

Lazy Loading

Deferring the fetch of a resource until it is needed, or until the browser is idle.

Web Platform21 connections

Code Coverage

The proportion of code executed by a test suite — a map of what is untested, not a measure of quality.

Testing & Verification16 connections

Unit Test

A fast, isolated test of one unit of behavior with its collaborators replaced.

Testing & Verification25 connections

CSS-in-JS

Writing a component's styles in JavaScript alongside its markup and logic, so styles are scoped automatically and can depend on the component's state, an approach popular in the React era whose runtime costs led to build-time variants.

Web Platform16 connections

ES Modules

JavaScript's standard module system of import and export statements, whose static structure enables tree shaking and whose long coexistence with CommonJS caused years of tooling pain.

Web Platform10 connections

Linked from7