跳至內容
建置您的應用程式最佳化記憶體使用量

記憶體使用量

隨著應用程式發展壯大且功能越來越豐富，它們在本地開發或建立正式版建置時可能會需要更多資源。

讓我們探討一些策略和技巧，以最佳化記憶體並解決 Next.js 中常見的記憶體問題。

減少依賴項數量

具有大量依賴項的應用程式將使用更多記憶體。

套件分析器可以協助您調查應用程式中可能可以移除的大型依賴項，以提升效能和記憶體使用率。

嘗試使用 experimental.webpackMemoryOptimizations

從 v15.0.0 版本開始，您可以在 next.config.js 檔案中加入 experimental.webpackMemoryOptimizations: true 來改變 Webpack 的行為，以減少最大記憶體用量，但可能會稍微增加編譯時間。

注意事項：此功能目前仍在實驗階段，需要在更多專案上進行測試，但風險評估為低。

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

注意事項：此功能與 Webpack 建置工作程序選項不相容，除非您有自訂 webpack 設定，否則該選項會自動啟用。

記錄堆積設定檔 
node --heap-prof node_modules/next/dist/bin/next build

建置結束時，Node.js 會建立一個 .heapprofile 檔案。

在 Chrome 開發人員工具中，您可以開啟「記憶體」分頁，然後按一下「載入設定檔」按鈕來視覺化檔案。

分析堆積快照 如何記錄和分析堆積快照以取得更多資訊。

Webpack 建置 worker

Webpack 建置 worker 允許您在獨立的 Node.js worker 內執行 Webpack 編譯，這將減少應用程式在建置期間的記憶體使用量。

從 v14.1.0 版本開始，如果您的應用程式沒有自訂 Webpack 設定，則預設會啟用此選項。

如果您使用的是舊版 Next.js 或您有自訂 Webpack 設定，則可以在 next.config.js 內設定 experimental.webpackBuildWorker: true 來啟用此選項。

注意事項：此功能可能與並非所有自訂 Webpack 外掛程式相容。

停用 Webpack 快取

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

您可以透過在應用程式中新增自訂 Webpack 設定來停用此行為

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

停用靜態分析

類型檢查和程式碼檢查可能會需要大量記憶體，尤其是在大型專案中。然而，大多數專案都有專用的 CI 執行器來處理這些任務。當建置在「程式碼檢查和類型有效性檢查」步驟中產生記憶體不足問題時，您可以在建置期間停用這些任務。

next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

請注意，由於類型錯誤或程式碼檢查問題，這可能會導致錯誤的部署。我們強烈建議僅在完成靜態分析後才將建置版本發佈到正式環境。如果您部署到 Vercel，您可以查看部署階段指南，了解如何在自訂任務成功後將建置版本發佈到正式環境。

停用原始碼對應表

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

您可以透過在 Next.js 設定中新增 productionBrowserSourceMaps: false 和 experimental.serverSourceMaps: false 來停用原始碼對應表的產生。

注意事項：某些外掛程式可能會開啟原始碼對應表，並且可能需要自訂設定才能停用。

Edge 記憶體問題

Next.js v14.1.3 修復了使用 Edge 執行階段時的記憶體問題。請更新到此版本（或更高版本）以查看是否解決了您的問題。