記憶體使用量

隨著應用程式功能日益豐富，在本地開發或建立生產版本時可能會需要更多資源。

讓我們探討一些最佳化記憶體使用及解決 Next.js 中常見記憶體問題的策略與技巧。

減少依賴項數量

擁有大量依賴項的應用程式會消耗更多記憶體。

套件分析工具 (Bundle Analyzer) 可協助您找出應用程式中可能移除的大型依賴項，以提升效能並減少記憶體使用。

使用 --experimental-debug-memory-usage 執行 next build

從 14.2.0 版本開始，您可以執行 next build --experimental-debug-memory-usage 來讓 Next.js 在建置過程中持續輸出記憶體使用資訊，例如堆積使用情況與垃圾回收統計數據。當記憶體使用接近設定上限時，系統也會自動建立堆積快照。

須知事項：此功能與 Webpack 建置工作選項不相容，該選項會自動啟用，除非您有自訂的 webpack 設定。

記錄堆積分析檔案

為找出記憶體問題，您可以從 Node.js 記錄堆積分析檔案，並在 Chrome DevTools 中載入以識別潛在的記憶體洩漏來源。

在終端機中，啟動 Next.js 建置時加入 --heap-prof 參數：

node --heap-prof node_modules/next/dist/bin/next build

建置完成後，Node.js 會建立一個 .heapprofile 檔案。

在 Chrome DevTools 中，您可以開啟「Memory」分頁並點擊「Load Profile」按鈕來視覺化分析檔案。

分析堆積快照

您可以使用檢測工具來分析應用程式的記憶體使用情況。

執行 next build 或 next dev 指令時，在指令前加入 NODE_OPTIONS=--inspect。這會在預設連接埠上啟動檢測代理程式。若希望在執行任何使用者程式碼前暫停，可改用 --inspect-brk 參數。程序執行期間，您可使用 Chrome DevTools 等工具連線至偵錯連接埠，記錄並分析堆積快照，查看哪些記憶體被保留。

從 14.2.0 版本開始，您也可使用 --experimental-debug-memory-usage 參數執行 next build 來更輕鬆地取得堆積快照。

在此模式下執行時，您可隨時向程序發送 SIGUSR2 信號，程序會立即建立堆積快照。

堆積快照會儲存至 Next.js 應用程式的專案根目錄，並可載入至 Chrome DevTools 等堆積分析工具中查看保留的記憶體。此模式目前尚不支援 Webpack 建置工作執行緒。

詳情請參閱 如何記錄與分析堆積快照。

Webpack 建置工作執行緒

Webpack 建置工作執行緒可讓您在獨立的 Node.js 工作執行緒中執行 Webpack 編譯，降低建置過程中的應用程式記憶體使用量。

從 v14.1.0 開始，若應用程式沒有自訂 Webpack 設定，此選項會預設啟用。

若您使用較舊版本的 Next.js 或有自訂 Webpack 設定，可在 next.config.js 中設定 experimental.webpackBuildWorker: true 來啟用此功能。

須知事項：此功能可能與部分自訂 Webpack 外掛不相容。

停用 Webpack 快取

Webpack 快取會將產生的 Webpack 模組儲存於記憶體或硬碟中，以加速建置過程。這雖有助於提升效能，但也會增加應用程式的記憶體使用量來儲存快取資料。

您可透過新增 自訂 Webpack 設定 來停用此行為：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // 重要：必須回傳修改後的設定
    return config
  },
}

export default nextConfig

停用原始碼對應 (source maps)

產生原始碼對應會在建置過程中消耗額外記憶體。

您可在 Next.js 設定中加入 productionBrowserSourceMaps: false 與 experimental.serverSourceMaps: false 來停用原始碼對應產生功能。

須知事項：部分外掛可能會啟用原始碼對應，可能需要額外設定才能停用。

Edge 執行環境記憶體問題

Next.js v14.1.3 已修復使用 Edge 執行環境時的記憶體問題。請更新至此版本（或更新版本）以確認是否解決您的問題。