dcaaef1011
Format: YYYY-MM-DD-description.md - 2026-01-19-infrastructure-deployment.md - 2026-01-19-backend-api-implementation.md (in progress) Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
---
|
|
title: Avoid Barrel File Imports
|
|
impact: CRITICAL
|
|
impactDescription: 200-800ms import cost, slow builds
|
|
tags: bundle, imports, tree-shaking, barrel-files, performance
|
|
---
|
|
|
|
## 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.
|
|
|
|
**Why tree-shaking doesn't help:** When a library is marked as external (not bundled), the bundler can't optimize it. If you bundle it to enable tree-shaking, builds become substantially slower analyzing the entire module graph.
|
|
|
|
**Incorrect (imports entire library):**
|
|
|
|
```tsx
|
|
import { Check, X, Menu } from 'lucide-react'
|
|
// Loads 1,583 modules, takes ~2.8s extra in dev
|
|
// Runtime cost: 200-800ms on every cold start
|
|
|
|
import { Button, TextField } from '@mui/material'
|
|
// Loads 2,225 modules, takes ~4.2s extra in dev
|
|
```
|
|
|
|
**Correct (imports only what you need):**
|
|
|
|
```tsx
|
|
import Check from 'lucide-react/dist/esm/icons/check'
|
|
import X from 'lucide-react/dist/esm/icons/x'
|
|
import Menu from 'lucide-react/dist/esm/icons/menu'
|
|
// Loads only 3 modules (~2KB vs ~1MB)
|
|
|
|
import Button from '@mui/material/Button'
|
|
import TextField from '@mui/material/TextField'
|
|
// Loads only what you use
|
|
```
|
|
|
|
**Alternative (Next.js 13.5+):**
|
|
|
|
```js
|
|
// next.config.js - use optimizePackageImports
|
|
module.exports = {
|
|
experimental: {
|
|
optimizePackageImports: ['lucide-react', '@mui/material']
|
|
}
|
|
}
|
|
|
|
// Then you can keep the ergonomic barrel imports:
|
|
import { Check, X, Menu } from 'lucide-react'
|
|
// Automatically transformed to direct imports at build time
|
|
```
|
|
|
|
Direct imports provide 15-70% faster dev boot, 28% faster builds, 40% faster cold starts, and significantly faster HMR.
|
|
|
|
Libraries commonly affected: `lucide-react`, `@mui/material`, `@mui/icons-material`, `@tabler/icons-react`, `react-icons`, `@headlessui/react`, `@radix-ui/react-*`, `lodash`, `ramda`, `date-fns`, `rxjs`, `react-use`.
|
|
|
|
Reference: [How we optimized package imports in Next.js](https://vercel.com/blog/how-we-optimized-package-imports-in-next-js)
|