最佳化套件打包
打包外部套件可以顯著提升應用程式的效能。預設情況下，在伺服器元件和路由處理器中導入的套件會由 Next.js 自動打包。此頁面將引導您如何分析和進一步最佳化套件打包。
分析 JavaScript bundles
@next/bundle-analyzer 是一個 Next.js 的插件，可以幫助您管理應用程式 bundles 的大小。它會產生一份視覺化報告，顯示每個套件及其相依套件的大小。您可以使用這些資訊來移除大型相依套件、分割程式碼或延遲載入您的程式碼。
安裝
然後，將 bundle analyzer 的設定新增到您的 next.config.js。
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {}
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer(nextConfig)產生報告
執行以下指令來分析您的 bundles
ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build報告會在您的瀏覽器中開啟三個新的分頁，您可以檢查它們。定期評估應用程式的 bundles 可以幫助您隨著時間推移維持應用程式效能。
最佳化套件匯入
某些套件，例如圖示庫，可能會匯出數百個模組，這可能會導致開發和生產環境中的效能問題。
您可以透過將 optimizePackageImports 選項新增到您的 next.config.js 來最佳化這些套件的匯入方式。此選項將僅載入您*實際*使用的模組，同時仍讓您可以方便地使用許多具名匯出的方式撰寫匯入語句。
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
optimizePackageImports: ['icon-library'],
},
}
module.exports = nextConfigNext.js 也會自動最佳化一些函式庫，因此不需要將它們包含在 optimizePackageImports 清單中。請參閱完整清單。
排除特定套件的自動捆綁
由於在伺服器組件和路由處理程序中導入的套件會由 Next.js 自動捆綁，您可以使用 next.config.js 中的 serverExternalPackages 選項，將特定套件排除在捆綁之外。
next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
serverExternalPackages: ['package-name'],
}
module.exports = nextConfigNext.js 包含一份熱門套件的清單，這些套件目前正在努力提升相容性，並已自動排除在捆綁之外。請參閱完整清單。