Why I Stopped Reaching for a State Management Library
For a long time I treated bundle size as something to worry about later. Then a small change to our Vite setup turned into a week of debugging, and "later" arrived all at once.
We had good intentions. We even had a document describing how bundle size should work. The trouble was that the document and the code had quietly gone their separate ways.
Some background
Most of the complexity was accidental. Over the years we'd layered three different approaches to bundle size on top of each other, and each one made sense at the time.
The first symptom was subtle. Nothing failed outright, but bundle size kept drifting in the wrong direction, and every fix seemed to make the next one harder.
What we changed
The fix turned out to be smaller than expected. Instead of adding another layer, we removed one and leaned on what Vite already gives you out of the box.
The core of it looks like this:
.card-list {
container-type: inline-size;
}
@container (min-width: 36rem) {
.card {
display: grid;
grid-template-columns: 12rem 1fr;
gap: 1.5rem;
}
}Nothing about this is clever, and that's the point. Anyone on the team can read it in a minute and know exactly what it does.
A few things that helped along the way:
- Make the default the safe choice, not just the documented one.
- Agree on what "done" means before the first pull request.
- Delete dead code aggressively; it's the cheapest refactor there is.
- Keep the old path around until the new one has survived a real incident.
Trade-offs
None of this is free. The new approach is a bit more verbose, and newcomers occasionally ask why we don't just use Svelte for everything. That's a fair question with a boring answer: we tried, and it made bundle size harder to reason about.
The biggest cost was social, not technical. Changing how people think about bundle size takes much longer than changing the code.
What's next
That's it for now. Next time I'll dig into Core Web Vitals, which turned out to be closely related.