JavaScript bundle size: a practical guide

The advice here is unglamorous, which is probably why it gets skipped. This guide covers what JavaScript bundle size actually involves, where it usually goes wrong, and how to tell whether yours is in reasonable shape.

Most development decisions are really maintenance decisions wearing a different hat. Nothing below assumes a large team or a large budget — most of it is a decision somebody has to make and then write down.

What is actually at stake

Every kilobyte of JavaScript costs more than a kilobyte of image. The cost of getting this wrong is rarely visible on the day it happens. The failure mode is not doing it wrong, it is doing it once and assuming it stays done.

For most businesses the question is not whether this matters but how much of it is worth doing right now. That depends on what you are trying to achieve in the next few months, not on best practice in the abstract. In practice this is a scheduling problem more than a technical one.

How to approach it

Most sites ship libraries for features they barely use. It is worth being explicit about, because assumptions differ quietly. Budget a little time for it every quarter and it never becomes a project of its own.

Code gets read far more often than it gets written, and usually by someone with less context than the author had. The version that works in practice is usually less elaborate than the version described in the guides.

Measure the bundle before optimising anything else. None of that requires a large budget, only a decision and someone to own it. Anything you cannot measure here, you are deciding by taste, which is fine as long as everyone knows it.

A working checklist

If you want a quick read on where you stand, work through this. Anything you cannot answer confidently is where to start.

• Every kilobyte of JavaScript costs more than a kilobyte of image
• Most sites ship libraries for features they barely use
• Measure the bundle before optimising anything else
• Someone is named as the owner, not just assumed to be
• There is a date in the calendar to review it again
• The decision and the reasoning behind it are written down somewhere findable
• You could explain the current setup to a new hire in five minutes

Common failure modes

The most common failure is not doing this badly. It is doing it once, during a launch, and never revisiting it. Circumstances move, the setup does not, and the gap widens quietly until something breaks or somebody notices the numbers.

• It was configured during a launch and has not been touched since
• Different people in the business believe different things are true about it
• There is no way to tell whether the last change helped or hurt
• The only person who understands it has left, or is about to

The question is rarely whether something can be built, but what it costs to keep running afterwards. That sounds obvious written down. It is still the thing most often skipped.

How we approach it

On our projects this gets handled during the build rather than added afterwards, because retrofitting it costs several times more than including it. We write down what was decided and why, so the next person to touch it is not guessing.

If you are working with someone else, the questions worth asking are simple: who owns this, how will we know it is working, and what happens when it needs to change?

What to do next

Pick the single item from the checklist above that would cause the most trouble if it turned out to be wrong. Fix that one, confirm it worked, then move on. The point is not perfection, it is knowing which of these you have consciously chosen to skip.