Avoid Barrel File Imports in Client Components

'use client'
 
// ❌ Loads all 1,500+ icons even though you use 3
import { Check, X, Menu } from 'lucide-react'
 
// ❌ Loads entire MUI library
import { Button, TextField } from '@mui/material'
 
// ❌ Loads all of lodash
import { debounce, throttle } from 'lodash'

'use client'
 
// ✅ Loads only the 3 icons you need
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'
 
// ✅ Direct component imports
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
 
// ✅ Individual lodash function imports
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'

// next.config.js — let Next.js handle it automatically
module.exports = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@mui/material',
      '@mui/icons-material',
      'lodash',
      'date-fns',
      'react-icons',
      '@radix-ui/react-icons',
    ],
  },
}
 
// Now barrel imports are automatically tree-shaken at build time:
import { Check, X, Menu } from 'lucide-react' // ✅ Only loads 3 icons

# Find barrel imports of known heavy libraries in client components
grep -rn "'use client'" src/ --include="*.tsx" -l | \
  xargs grep -l "from 'lucide-react'\|from '@mui/material'\|from 'lodash'\|from 'react-icons'"