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):

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 - Next.js 13.5+ (recommended):

// next.config.js - automatically optimizes barrel imports at build time
module.exports = {
  experimental: {
    optimizePackageImports: ['lucide-react', '@mui/material']
  }
}

// Keep the standard imports - Next.js transforms them to direct imports
import { Check, X, Menu } from 'lucide-react'
// Full TypeScript support, no manual path wrangling

This is the recommended approach because it preserves TypeScript type safety and editor autocompletion while still eliminating the barrel import cost.

Correct - Direct imports (non-Next.js projects):

import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
// Loads only what you use

TypeScript warning: Some libraries (notably lucide-react) don't ship .d.ts files for their deep import paths. Importing from lucide-react/dist/esm/icons/check resolves to an implicit any type, causing errors under strict or noImplicitAny. Prefer optimizePackageImports when available, or verify the library exports types for its subpaths before using direct imports.

These optimizations 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

Capability

Other metadata

metadata: { "priority": 4, "docs": [ "https://react.dev/reference/react", "https://react.dev/learn" ], "pathPatterns": [ "src/components/**/*.tsx", "src/components/**/*.jsx", "app/components/**/*.tsx", "app/components/**/*.jsx", "components/**/*.tsx", "components/**/*.jsx", "src/ui/**/*.tsx", "lib/components/**/*.tsx" ], "bashPatterns": [], "importPatterns": [ "react", "react-dom" ] }
validate: [ { "pattern": "from\\s+['\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.", "message": "Legacy CSS-in-JS or component library detected. Consider shadcn/ui + Tailwind for modern Vercel-native UI.", "severity": "warn", "upgradeToSkill": "shadcn", "upgradeWhy": "Migrate from CSS-in-JS/MUI/Chakra to shadcn/ui + Tailwind CSS for better SSR performance and Vercel ecosystem alignment.", "skipIfFileContains": "@/components/ui|shadcn|tailwindcss" } ]
retrieval: { "aliases": [ "react review", "component quality", "tsx linter", "react patterns" ], "intents": [ "review react code", "improve component quality", "check accessibility", "optimize react" ], "entities": [ "hooks", "accessibility", "React", "TSX", "component" ] }
chainTo: [ { "pattern": "from\\s+['\\\"](styled-components|@emotion/styled|@emotion/react|@mui/material|@chakra-ui/react)['\"]|styled\\.", "targetSkill": "shadcn", "message": "Legacy CSS-in-JS or component library detected — loading shadcn/ui guidance for modern Vercel-native UI." } ]

/react-best-practices

rulesbundle-barrel-imports.md

Avoid Barrel File Imports

Third-party checks

Provenance

Capability

/react-best-practices