Back to all skills
Progress8 of 45
BundleCritical

Avoid Barrel File Imports

Import directly from source files instead of barrel files to avoid loading thousands of unused modules. **Barrel files** are entry points that re-export multiple modules (e.g., `index.js` that does `export * from './module'`). Popular icon and component libraries can have **up to 10,000 re-exports** in their entry file. For many React packages, **it takes 200-800ms just to import them**, affecting both development speed and production cold starts.

bundleimportstree-shakingbarrel-filesperformance

Code Comparison

Incorrect (imports entire library):tsx
Correct (imports only what you need):tsx
Alternative (Next.js 13.5+):js

Why This Matters

Impact: 200-800ms import cost, slow builds. This optimization is classified as CRITICAL priority for production applications.