CodePark/ questions / JavaScript bundle size
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › JavaScript bundle size

components/index.ts re-exports 200 components. A page imports only the button. Why can this barrel file make the build slower and the bundle bigger?

// components/index.ts (a "barrel" file)
export * from "./Button";
export * from "./DataGrid";
export * from "./RichTextEditor";
// ... 197 more

// pages/checkout.tsx
import { Button } from "@/components";
The bundler must load and parse every re-exported module, and it keeps any it can't prove are free of side effects

To know where Button comes from, the bundler has to follow every export * and parse all 200 files. That costs build time and dev-server time. If any of those files might have side effects, the bundler keeps them in the bundle too.

"The browser downloads index.ts first" is the tempting wrong answer. Bundlers resolve imports at build time, so the browser never fetches the barrel. Fixes: import from the file directly (@/components/Button), mark the package "sideEffects": false, or use a tool that rewrites barrel imports, like Next.js optimizePackageImports.