optimizePackageImports
一部のパッケージは、数百または数千ものモジュールをエクスポートする可能性があり、開発および本番環境でのパフォーマンスの問題を引き起こす可能性があります。
experimental.optimizePackageImports にパッケージを追加すると、実際に使用しているモジュールのみがロードされます。ただし、多数のエクスポートを持つ import 文を記述する利便性は維持されます。
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/*
- effect
- @effect/*
役に立ちましたか?