如何最佳化包捆綁

捆綁外部包可以顯著提高應用程式的效能。預設情況下，在伺服器元件和路由處理程式中匯入的包會自動被 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 來最佳化這些包的匯入方式。此選項將只加載您*實際*使用的模組，同時仍為您提供編寫具有許多命名匯出的匯入語句的便利。

/** @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 包含一份目前正在相容性工作並已自動排除的流行包列表。請參閱完整列表。