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

onDemandEntries

設定 Next.js 在開發環境中如何處置及保留記憶體中的頁面。

output

Next.js 會自動追蹤每個頁面所需的文件，以便輕鬆部署您的應用程式。在此了解其運作原理。