メインコンテンツまでスキップ

optimizePackageImports

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

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

next.config.js
module.exports = {
experimental: {
optimizePackageImports: ['package-name'], // 最適化したいパッケージ名を指定
},
}

以下のライブラリはデフォルトで最適化されています:

  • lucide-react
  • date-fns
  • lodash-es
  • ramda
  • antd
  • react-bootstrap
  • ahooks
  • @ant-design/icons
  • @headlessui/react
  • @headlessui-float/react
  • @heroicons/react/20/solid
  • @heroicons/react/24/solid
  • @heroicons/react/24/outline
  • @visx/visx
  • @tremor/react
  • rxjs
  • @mui/material
  • @mui/icons-material
  • recharts
  • react-use
  • @material-ui/core
  • @material-ui/icons
  • @tabler/icons-react
  • mui-core
  • react-icons/*