Barrel Files in TypeScript Can Double Bundle Size, Developers Warn
Barrel files — index.ts files that re-export multiple modules from a folder — are a widely taught clean-code practice that can silently break tree-shaking and inflate JavaScript bundles. A 2024 test by Bartosz Łaniewski found that importing a Material-UI component via a barrel file produced a 151 kB bundle, compared to just 75 kB with a direct import. React Query's team reported a 68% reduction in loaded modules after removing internal barrel files from their Next.js project, cutting startup times from 5–10 seconds to around 3.5k modules. Vite's official documentation now explicitly warns against barrel files under its performance tuning section, and Next.js 13.5 shipped a dedicated compiler option, optimizePackageImports, to mitigate the problem with third-party packages. Developers are increasingly recommending direct source imports for performance-sensitive code rather than relying on barrel file conventions.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)
Log in to join the discussion and vote.
Log in