記憶體用量
隨著應用程式成長並變得功能更豐富，在本地開發或建立生產建置時，它們可能會需要更多資源。
讓我們來探索一些策略和技術，以最佳化記憶體並解決 Next.js 中常見的記憶體問題。
減少依賴套件數量
具有大量依賴套件的應用程式將使用更多記憶體。
套件分析器可以幫助您調查應用程式中可能可以移除的大型依賴套件，以改善效能和記憶體用量。
試用 experimental.webpackMemoryOptimizations
從 v15.0.0 開始，您可以將 experimental.webpackMemoryOptimizations: true 新增至您的 next.config.js 檔案，以變更 Webpack 中的行為，從而減少最大記憶體用量，但可能會稍微增加編譯時間。
小知識：此功能目前為實驗性功能，首先在更多專案上進行測試，但被認為是低風險的。
使用 --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.js
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',
})
}
// Important: return the modified config
return config
},
}
export default nextConfig停用靜態分析
類型檢查和程式碼檢查可能會需要大量記憶體，尤其是在大型專案中。但是，大多數專案都有專用的 CI 執行器，已經處理這些任務。當建置在「Linting and checking validity of types」步驟期間產生記憶體不足問題時，您可以在建置期間停用這些任務
/** @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，您可以查看暫存部署指南，以了解如何在自訂任務成功後將建置提升到生產環境。
停用原始碼地圖
產生原始碼地圖會在建置過程中消耗額外的記憶體。
您可以透過將 productionBrowserSourceMaps: false 和 experimental.serverSourceMaps: false 新增至您的 Next.js 配置來停用原始碼地圖產生。
小知識：某些外掛程式可能會開啟原始碼地圖，並且可能需要自訂配置才能停用。
Edge 記憶體問題
Next.js v14.1.3 修復了使用 Edge 執行階段時的記憶體問題。請更新到此版本（或更高版本）以查看它是否解決了您的問題。
這有幫助嗎？