套件分析工具 (Bundle Analyzer)

@next/bundle-analyzer 是一個 Next.js 插件，可幫助您管理 JavaScript 模組的大小。它會生成每個模組及其依賴項大小的視覺化報告。您可以使用這些資訊來移除大型依賴項、拆分程式碼，或僅在需要時載入部分內容，從而減少傳輸到客戶端的數據量。

安裝

執行以下命令安裝插件：

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

然後，將套件分析工具的設定加入您的 next.config.js 檔案中。

next.config.js

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = withBundleAnalyzer(nextConfig)

分析您的套件

執行以下命令來分析您的套件：

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

報告將在您的瀏覽器中開啟三個新分頁供您檢查。在開發過程中定期執行此操作，並在部署網站前進行分析，可以幫助您及早發現大型套件，並設計出效能更好的應用程式。

安裝

分析您的套件

On this page