Tree Shaking
Statically removing exports that nothing imports, shrinking the shipped bundle.
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
- BundlerWeb Platform
The tool that resolves an application's modules into the files a browser downloads.
- Code SplittingWeb Platform
Dividing an application bundle so a page downloads only the code it needs.
- CSS-in-JSWeb Platform
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.
- ES ModulesWeb Platform
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.
- Module GraphWeb Platform
The directed graph of imports that decides what code ends up where.
- Test-Driven DevelopmentTesting & Verification
Writing a failing test first, making it pass, then improving the code with the test as a net.
- Unit TestTesting & Verification
A fast, isolated test of one unit of behavior with its collaborators replaced.