最佳化套件捆綁

捆綁外部套件可以顯著提升應用程式的效能。預設情況下，在伺服器元件和路由處理器中匯入的套件會由 Next.js 自動捆綁。本頁面將引導您了解如何分析並進一步最佳化套件捆綁。

分析 JavaScript 捆綁包

@next/bundle-analyzer 是一個 Next.js 的外掛程式，可協助您管理應用程式捆綁包的大小。它會產生一份視覺化報告，顯示每個套件及其依賴項的大小。您可以使用這些資訊來移除大型依賴項、拆分或延遲載入您的程式碼。

安裝

執行以下命令來安裝此外掛程式

npm i @next/bundle-analyzer
# or
yarn add @next/bundle-analyzer
# or
pnpm add @next/bundle-analyzer

然後，將捆綁分析器的設定新增至您的 next.config.js。

/** @type {import('next').NextConfig} */
const nextConfig = {}
 
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})
 
module.exports = withBundleAnalyzer(nextConfig)

產生報告

執行以下命令來分析您的捆綁包

ANALYZE=true npm run build
# or
ANALYZE=true yarn build
# or
ANALYZE=true pnpm build

報告將在您的瀏覽器中開啟三個新分頁，您可以在其中檢查。定期評估應用程式的捆綁包可以協助您長期維持應用程式效能。

最佳化套件匯入

某些套件，例如圖示函式庫，可能會匯出數百個模組，這可能會導致開發和生產環境中的效能問題。

您可以透過將 optimizePackageImports 選項新增至您的 next.config.js，來最佳化這些套件的匯入方式。此選項只會載入您實際使用的模組，同時仍讓您方便地編寫具有多個具名匯出的 import 陳述式。

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}
 
module.exports = nextConfig

Next.js 也會自動最佳化某些函式庫，因此它們不需要包含在 optimizePackageImports 清單中。請參閱完整清單。

選擇性排除特定套件不進行捆綁

由於在伺服器元件和路由處理器中匯入的套件會由 Next.js 自動捆綁，您可以使用 next.config.js 中的 serverExternalPackages 選項，選擇性排除特定套件不進行捆綁。

/** @type {import('next').NextConfig} */
const nextConfig = {
  serverExternalPackages: ['package-name'],
}
 
module.exports = nextConfig

Next.js 包含一份目前正在處理相容性並自動選擇不捆綁的常用套件清單。請參閱完整清單。