Skip to content
Motif UI
Go Pro
Performance

The cost of one dependency

A 4 KB library is never 4 KB. Here is the arithmetic this site does before npm install, with its own chunks as the evidence.

Intermediate1 min read (computed · recorded 8)updated 2026-09-12dependenciesbundlearithmetic

by Motif Editors

revised 2026-09-12 — First publication in bank-3 batch 4.

Part 2 of 3 in Performance arithmetic← Why your hero LCP is a font problemLighthouse is a smoke test →

Key takeaways
  • — The real cost is bytes plus glue plus the shared-chunk tax.
  • — Price bytes against your slowest reader's connection.
  • — Ask for the exit plan before the install.

The real invoice

A dependency costs its own bytes, plus the glue you write, plus the shared-chunk tax — once it lands in a module the shell imports, every route pays. The site's build report attributes chunks to project modules precisely so this tax is visible before the merge, not after the release.

The arithmetic that matters: bytes ÷ your slowest reader's connection. A 40 KB utility is two seconds of a 2G reader's patience, per page, until it is cached.

The questions

  • Can the 40 lines it would replace be written and owned instead?
  • Does it enter the shared chunk, or a route's own?
  • Does it hydrate, or is it CSS-only?
  • What is the exit plan — is the API small enough to unpick later?
The ratchet

Shared-shell budgets only work when they fail loudly. This repo's harness fails the build that grows the shell past its recorded number — and the number only moves through a written rationale.

Practise the lesson

Theory sticks when you ship it. These original Motif assets put this guide's lesson to work — open one and copy it into your own page.

Total RowpracticeCheckbox CardspracticePricing with Usage Sliderpractice
Keep learning
All guidesTry the interactive Lab