optimizePackageImports | Next.js 日本語

一部のパッケージは数百または数千のモジュールをエクスポートする場合があり、開発時や本番環境でパフォーマンスの問題を引き起こす可能性があります。

experimental.optimizePackageImports にパッケージを追加すると、実際に使用しているモジュールのみがロードされ、多くの名前付きエクスポートを含むインポート文を書く便利さはそのまま維持されます。

next.config.js

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

@mui/icons-material、@mui/material、date-fns、lodash、lodash-es、react-bootstrap、@headlessui/react、@heroicons/react、lucide-react などのライブラリはデフォルトで最適化されています。