bundle-barrel-imports

バレルファイルからのインポートを避ける

未使用のモジュールを大量に読み込まないよう、バレルファイルではなくソースファイルから直接インポートしてください。バレルファイルとは、複数のモジュールを再エクスポートするエントリーポイントです（例：export * from './module'を実行するindex.js）。

人気のアイコンライブラリやコンポーネントライブラリでは、エントリーファイルから最大10,000個の再エクスポートが行われる場合があります。多くのReactパッケージでは、インポートするだけで200～800msかかり、開発速度と本番環境のコールドスタートの両方に影響します。

ツリーシェイキングで解決しない理由： ライブラリが外部モジュールとして扱われている（バンドルされていない）場合、バンドラーは最適化できません。ツリーシェイキングを有効にするためにバンドルすると、モジュールグラフ全体を解析する必要があるため、ビルドが大幅に遅くなります。

誤り（ライブラリ全体をインポート）：

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

正しい（必要なものだけをインポート）：

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

代替案（Next.js 13.5+）：

// 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

直接インポートすると、開発環境の起動が15～70％速くなり、ビルドが28％速くなり、コールドスタートが40％速くなるほか、HMRも大幅に高速化します。

影響を受けやすいライブラリ：lucide-react、@mui/material、@mui/icons-material、@tabler/icons-react、react-icons、@headlessui/react、@radix-ui/react-*、lodash、ramda、date-fns、rxjs、react-use。

参考：Next.jsにおけるパッケージインポートの最適化