如何優化套件打包

打包外部套件能顯著提升應用程式效能。預設情況下，Next.js 會自動打包在伺服器元件 (Server Components) 和路由處理器 (Route Handlers) 中導入的套件。本頁將引導您如何分析並進一步優化套件打包。

分析 JavaScript 套件包

@next/bundle-analyzer 是 Next.js 的插件，可協助管理應用程式套件包大小。它會生成每個套件及其依賴項大小的視覺化報告，您可據此移除大型依賴、拆分程式碼或進行懶加載 (lazy-loading)。

安裝

執行以下指令安裝插件：

npm i @next/bundle-analyzer
# 或
yarn add @next/bundle-analyzer
# 或
pnpm add @next/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)

生成報告

執行以下指令分析套件包：

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

報告將在瀏覽器開啟三個新分頁供您檢視。定期評估應用程式套件包有助於長期維持效能。

優化套件導入

某些套件（如圖示庫）可能導出數百個模組，導致開發與生產環境的效能問題。

您可透過在 next.config.js 加入 optimizePackageImports 選項來優化導入方式。此選項僅載入實際使用的模組，同時保留使用多個命名導入的便利性。

next.config.js

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

module.exports = nextConfig

Next.js 會自動優化部分函式庫，因此它們無需列入 optimizePackageImports。請參閱完整清單。

排除特定套件不打包

由於 Next.js 會自動打包伺服器元件 (Server Components) 和路由處理器 (Route Handlers) 導入的套件，您可透過 next.config.js 的 serverExternalPackages 選項排除特定套件不打包：

next.config.js

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

module.exports = nextConfig

Next.js 內建一份熱門套件清單，這些套件目前正進行相容性調整並預設排除。請參閱完整清單。

生產環境

在將 Next.js 應用程式投入生產環境前，確保最佳效能和使用者體驗的建議事項。

分析 JavaScript 套件包

安裝

生成報告

優化套件導入

排除特定套件不打包

生產環境

On this page