Skip barrel imports
On Next.js, use optimizePackageImports; elsewhere, import file paths.
Vercelvercel.com/blog
Reference: How we optimized package imports in Next.js
From vercel-react-best-practices, rule bundle-barrel-imports.
One icon, 1,583 modules
Type the lucide icons you use, comma separated.
Barrel importBad
- Modules
- 1,583
- Size
- ~1 MB
- Dev
- +2.8 s
Direct importsGood
- Modules
- 3
- Size
- ~2 KB
- Dev
- 0 s
Cold-start the dev server
Press Start, tick optimizePackageImports, start again.
Barrel importBad
0.0 simport cost
Direct importsGood
0.0 simport cost
// next.config.js
module.exports = {
experimental: {
optimizePackageImports: ['lucide-react', '@mui/material'],
},
}Why it matters, pros and cons
Why it matters
One import from a barrel loads every module it re-exports.
Pros
- 15–70% faster dev boot
- ~2 KB instead of ~1 MB
- The Next.js flag keeps imports and types
Cons
- Deep paths are internals; a major can move them
- Small in-house barrels cost little
- lucide deep paths ship no types: implicit
any