跳至內容
建置您的應用程式最佳化套件打包

最佳化套件打包

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

分析 JavaScript bundles

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

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

然後，將 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 = nextConfig

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

排除特定套件的自動捆綁

由於在伺服器組件和路由處理程序中導入的套件會由 Next.js 自動捆綁，您可以使用 next.config.js 中的 serverExternalPackages 選項，將特定套件排除在捆綁之外。

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

Next.js 包含一份熱門套件的清單，這些套件目前正在努力提升相容性，並已自動排除在捆綁之外。請參閱完整清單。

後續步驟

進一步了解如何最佳化您的應用程式以利上線。

上線檢查清單

在將 Next.js 應用程式上線之前，建議您參考以下建議，以確保最佳效能和使用者體驗。