Why is one tiny import dragging a huge chunk into my bundle?

programming web dev
1

Yo folks, I’m in the middle of wiring up a Vite + React app and trying to keep the initial bundle slim, but one “harmless” helper import is suddenly pulling in a big dependency tree and wrecking first load.

// used in a couple components
import { format } from "date-fns";
import { enUS } from "date-fns/locale";

export function pretty(ts) {
  return format(new Date(ts), "PPpp", { locale: enUS });
}

What’s the practical way to confirm exactly why this import isn’t tree-shaking cleanly and fix it without playing whack-a-mole with manual aliases or swapping libraries?

1 Like
2

That enUS import is the silent killer here: date-fns/locale is a barrel, so you can end up dragging a ton of locale modules even if you only reference one. To confirm it, run vite build and then inspect the Rollup output (--minify false helps), and you’ll literally see a big date-fns/locale/* chunk in the module list. The fix is to import the locale by path so the bundler doesn’t touch the barrel:

import { format } from "date-fns";
import enUS from "date-fns/locale/en-US";

Naming tip: call the helper formatLocal or formatDateTime so you can grep for it later when another “harmless” import starts eating your bundle.

2 Likes