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.