跳至內容
API 參考next.config.js 選項optimizePackageImports

最佳化套件導入 (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/*