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