11---
2- source-updated-at : 2025-05-16T04:52:11 .000Z
3- translation-updated-at : 2025-05-25T20:38:54.654Z
2+ source-updated-at : 2025-06-05T15:29:30 .000Z
3+ translation-updated-at : 2025-06-05T23:39:59.602Z
44title : 如何優化記憶體使用
55nav_title : 記憶體使用
6- description : 在開發與生產環境中優化應用程式的記憶體使用 。
6+ description : 優化應用程式在開發和生產環境中的記憶體使用 。
77---
88
99隨著應用程式功能日益豐富，在本地開發或建立生產版本時可能會需要更多資源。
1010
11- 讓我們探討一些優化記憶體的策略與技巧 ，並解決 Next.js 中常見的記憶體問題。
11+ 讓我們探討一些優化記憶體的策略和技巧 ，並解決 Next.js 中常見的記憶體問題。
1212
13- ## 減少依賴套件數量
13+ ## 減少依賴項數量
1414
15- 應用程式若依賴大量套件，將會使用更多記憶體 。
15+ 擁有大量依賴項的應用程式會使用更多記憶體 。
1616
17- [ 套件分析工具 (Bundle Analyzer)] ( /docs/app/guides/package-bundling ) 可協助您找出應用程式中可能移除的大型依賴套件，以提升效能並降低記憶體使用量 。
17+ [ 套件分析工具 (Bundle Analyzer)] ( /docs/app/guides/package-bundling ) 可以幫助您檢查應用程式中可能移除的大型依賴項，以提升效能和記憶體使用效率 。
1818
1919## 嘗試 ` experimental.webpackMemoryOptimizations `
2020
21- 從 ` v15.0.0 ` 開始，您可以在 ` next.config.js ` 檔案中加入 ` experimental.webpackMemoryOptimizations: true ` ，這會改變 Webpack 的行為以降低最大記憶體使用量，但可能會略微增加編譯時間 。
21+ 從 ` v15.0.0 ` 開始，您可以在 ` next.config.js ` 檔案中加入 ` experimental.webpackMemoryOptimizations: true ` ，這會改變 Webpack 的行為以減少最大記憶體使用量，但可能會輕微增加編譯時間 。
2222
23- > ** 須知** ：此功能目前處於實驗階段，需先在更多專案上測試 ，但被認為是低風險的。
23+ > ** 須知** ：此功能目前處於實驗階段，需要更多專案測試 ，但被認為是低風險的。
2424
2525## 使用 ` --experimental-debug-memory-usage ` 執行 ` next build `
2626
27- 從 ` 14.2.0 ` 開始，您可以執行 ` next build --experimental-debug-memory-usage ` ，在此模式下 Next.js 會在整個建置過程中持續輸出記憶體使用資訊，例如堆積使用量與垃圾回收統計數據。當記憶體使用量接近設定上限時 ，也會自動拍攝堆積快照。
27+ 從 ` 14.2.0 ` 開始，您可以執行 ` next build --experimental-debug-memory-usage ` ，在此模式下 Next.js 會在整個建置過程中持續輸出記憶體使用資訊，例如堆積使用情況和垃圾回收統計數據。當記憶體使用接近設定的限制時 ，也會自動拍攝堆積快照。
2828
29- > ** 須知** ：此功能與 Webpack 建置工作選項不相容，除非您有自訂的 webpack 設定 ，否則該選項會自動啟用。
29+ > ** 須知** ：此功能與 Webpack 建置工作選項不相容，除非您有自訂的 webpack 配置 ，否則該選項會自動啟用。
3030
31- ## 記錄堆積分析檔
31+ ## 記錄堆積分析檔案
3232
33- 為了找出記憶體問題 ，您可以從 Node.js 記錄堆積分析檔 ，並在 Chrome DevTools 中載入以識別潛在的記憶體洩漏來源。
33+ 為了尋找記憶體問題 ，您可以從 Node.js 記錄堆積分析檔案 ，並在 Chrome DevTools 中載入以識別潛在的記憶體洩漏來源。
3434
35- 在終端機中，啟動 Next.js 建置時傳遞 ` --heap-prof ` 參數給 Node.js：
35+ 在終端機中，啟動 Next.js 建置時傳遞 ` --heap-prof ` 標記給 Node.js：
3636
3737``` sh
3838node --heap-prof node_modules/next/dist/bin/next build
3939```
4040
41- 建置結束時 ，Node.js 會建立一個 ` .heapprofile ` 檔案。
41+ 在建置結束時 ，Node.js 會建立一個 ` .heapprofile ` 檔案。
4242
4343在 Chrome DevTools 中，您可以開啟「Memory」分頁並點擊「Load Profile」按鈕來視覺化該檔案。
4444
4545## 分析堆積快照
4646
4747您可以使用檢查工具來分析應用程式的記憶體使用情況。
4848
49- 執行 ` next build ` 或 ` next dev ` 指令時，在指令開頭加入 ` NODE_OPTIONS=--inspect ` 。這會在預設連接埠上暴露檢查代理程式。若您希望在執行任何使用者程式碼前中斷，可以改傳遞 ` --inspect-brk ` 。當程序執行時，您可以使用 Chrome DevTools 等工具連接到偵錯連接埠，記錄並分析堆積快照以查看哪些記憶體被保留。
49+ 執行 ` next build ` 或 ` next dev ` 指令時，在指令開頭加入 ` NODE_OPTIONS=--inspect ` 。這會在預設連接埠上公開檢查代理程式。如果您希望在執行任何使用者程式碼前中斷，可以改為傳遞 ` --inspect-brk ` 。當程序執行時，您可以使用 Chrome DevTools 等工具連接到偵錯連接埠，記錄並分析堆積快照以查看哪些記憶體被保留。
5050
51- 從 ` 14.2.0 ` 開始，您也可以使用 ` --experimental-debug-memory-usage ` 參數執行 ` next build ` ，讓拍攝堆積快照更簡單 。
51+ 從 ` 14.2.0 ` 開始，您也可以使用 ` --experimental-debug-memory-usage ` 標記執行 ` next build ` ，使拍攝堆積快照更加容易 。
5252
53- 在此模式下執行時，您可以隨時向程序發送 ` SIGUSR2 ` 信號，程序會拍攝堆積快照。
53+ 在此模式下執行時，您可以在任何時間點向程序發送 ` SIGUSR2 ` 信號，程序會拍攝堆積快照。
5454
55- 堆積快照會儲存在 Next.js 應用程式的專案根目錄中，可載入到任何堆積分析工具 （如 Chrome DevTools）中查看保留的記憶體。此模式目前尚不支援 Webpack 建置工作。
55+ 堆積快照會儲存到 Next.js 應用程式的專案根目錄，並可載入到任何堆積分析工具 （如 Chrome DevTools）中查看保留的記憶體。此模式目前尚不支援 Webpack 建置工作。
5656
57- 更多資訊請參閱 [ 如何記錄與分析堆積快照 ] ( https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots ) 。
57+ 詳情請參閱 [ 如何記錄和分析堆積快照 ] ( https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots ) 。
5858
5959## Webpack 建置工作
6060
61- Webpack 建置工作讓您能在獨立的 Node.js 工作程序中執行 Webpack 編譯，這會降低建置期間應用程式的記憶體使用量 。
61+ Webpack 建置工作允許您在獨立的 Node.js 工作執行緒中執行 Webpack 編譯，這會減少建置期間應用程式的記憶體使用量 。
6262
63- 從 ` v14.1.0 ` 開始，若您的應用程式沒有自訂 Webpack 設定，此選項會預設啟用 。
63+ 從 ` v14.1.0 ` 開始，如果您的應用程式沒有自訂 Webpack 配置，此選項會自動啟用 。
6464
65- 如果您使用較舊版本的 Next.js 或有自訂 Webpack 設定，可以在 ` next.config.js ` 中設定 ` experimental.webpackBuildWorker: true ` 來啟用此選項。
65+ 如果您使用較舊版本的 Next.js 或有自訂 Webpack 配置，可以透過在 ` next.config.js ` 中設定 ` experimental.webpackBuildWorker: true ` 來啟用此選項。
6666
67- > ** 須知** ：此功能可能與所有自訂 Webpack 外掛不相容。
67+ > ** 須知** ：此功能可能與部分自訂 Webpack 外掛不相容。
6868
6969## 停用 Webpack 快取
7070
71- [ Webpack 快取] ( https://webpack.js.org/configuration/cache/ ) 會將產生的 Webpack 模組儲存在記憶體或硬碟中 ，以提升建置速度。這有助於效能，但也會增加應用程式的記憶體使用量來儲存快取資料。
71+ [ Webpack 快取] ( https://webpack.js.org/configuration/cache/ ) 會將生成的 Webpack 模組儲存在記憶體或磁碟中 ，以提升建置速度。這有助於效能，但也會增加應用程式的記憶體使用量來儲存快取資料。
7272
73- 您可以透過為應用程式新增[ 自訂 Webpack 設定 ] ( /docs/app/api-reference/config/next-config-js/webpack ) 來停用此行為：
73+ 您可以透過為應用程式新增 [ 自訂 Webpack 配置 ] ( /docs/app/api-reference/config/next-config-js/webpack ) 來停用此行為：
7474
7575``` js filename="next.config.mjs"
7676/** @type {import('next').NextConfig} */
@@ -84,7 +84,7 @@ const nextConfig = {
8484 type: ' memory'
8585 })
8686 }
87- // 重要：回傳修改後的設定
87+ // 重要：回傳修改後的配置
8888 return config
8989 },
9090}
@@ -94,18 +94,18 @@ export default nextConfig
9494
9595## 停用靜態分析
9696
97- 型別檢查與程式碼檢查可能會消耗大量記憶體 ，特別是在大型專案中。然而，多數專案已有專用的 CI 執行器來處理這些任務。當建置在「Linting and checking validity of types」步驟中發生記憶體不足問題時 ，您可以在建置期間停用這些任務：
97+ 類型檢查和程式碼檢查可能會消耗大量記憶體 ，特別是在大型專案中。然而，大多數專案都有專門的 CI 執行器來處理這些任務。當建置在「Linting and checking validity of types」步驟中出現記憶體不足問題時 ，您可以在建置期間停用這些任務：
9898
9999``` js filename="next.config.mjs"
100100/** @type {import('next').NextConfig} */
101101const nextConfig = {
102102 eslint: {
103- // 警告：即使專案有 ESLint 錯誤，此設定仍允許生產建置成功完成 。
103+ // 警告：即使專案中有 ESLint 錯誤，這也允許生產建置成功完成 。
104104 ignoreDuringBuilds: true ,
105105 },
106106 typescript: {
107107 // !! 警告 !!
108- // 即使專案有型別錯誤，仍危險地允許生產建置成功完成 。
108+ // 即使專案中有類型錯誤，也允許生產建置成功完成 。
109109 // !! 警告 !!
110110 ignoreBuildErrors: true ,
111111 },
@@ -115,18 +115,51 @@ export default nextConfig
115115```
116116
117117- [ 忽略 TypeScript 錯誤] ( /docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production )
118- - [ Next.js 設定中的 ESLint] ( /docs/pages/api-reference/config/next-config-js/eslint )
118+ - [ Next.js 配置中的 ESLint] ( /docs/pages/api-reference/config/next-config-js/eslint )
119119
120- 請注意，這可能會因型別錯誤或程式碼檢查問題而導致部署失敗。我們強烈建議僅在靜態分析完成後才將建置推送到生產環境 。如果您部署到 Vercel，可以查看[ 預覽部署指南 ] ( https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment ) 了解如何在自訂任務成功後將建置推送到生產環境。
120+ 請注意，這可能會因類型錯誤或程式碼檢查問題而導致部署失敗。我們強烈建議僅在靜態分析完成後將建置推送到生產環境 。如果您部署到 Vercel，可以查看 [ 預部署指南 ] ( https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment ) 了解如何在自訂任務成功後將建置推送到生產環境。
121121
122- ## 停用原始碼對應
122+ ## 停用原始碼映射
123123
124- 產生原始碼對應會在建置過程中消耗額外記憶體 。
124+ 生成原始碼映射會在建置過程中消耗額外記憶體 。
125125
126- 您可以透過在 Next.js 設定中加入 ` productionBrowserSourceMaps: false ` 和 ` experimental.serverSourceMaps: false ` 來停用原始碼對應的產生 。
126+ 您可以透過在 Next.js 配置中新增 ` productionBrowserSourceMaps: false ` 和 ` experimental.serverSourceMaps: false ` 來停用原始碼映射生成 。
127127
128- > ** 須知** ：某些外掛可能會啟用原始碼對應，可能需要自訂設定才能停用 。
128+ > ** 須知** ：某些外掛可能會開啟原始碼映射，可能需要自訂配置來停用 。
129129
130130## Edge 記憶體問題
131131
132- Next.js ` v14.1.3 ` 修復了使用 Edge 執行環境時的記憶體問題。請更新至此版本（或更新版本）以確認是否解決您的問題。
132+ Next.js ` v14.1.3 ` 修復了使用 Edge 運行時時的記憶體問題。請更新到此版本（或更高版本）以查看是否解決了您的問題。
133+
134+ ## 預載入項目
135+
136+ 當 Next.js 伺服器啟動時，它會將每個頁面的 JavaScript 模組預載入記憶體，而不是在請求時載入。
137+
138+ 此優化以較大的初始記憶體佔用為代價，換取更快的回應時間。
139+
140+ 要停用此優化，請將 ` experimental.preloadEntriesOnStart ` 標記設為 ` false ` 。
141+
142+ ``` ts filename="next.config.ts" switcher
143+ import type { NextConfig } from ' next'
144+
145+ const : NextConfig = {
146+ experimental: {
147+ preloadEntriesOnStart: false ,
148+ },
149+ }
150+
151+ export default config
152+ ```
153+
154+ ``` js filename="next.config.mjs" switcher
155+ /** @type {import('next').NextConfig} */
156+ const config = {
157+ experimental: {
158+ preloadEntriesOnStart: false ,
159+ },
160+ }
161+
162+ export default config
163+ ```
164+
165+ Next.js 不會卸載這些 JavaScript 模組，這意味著即使停用此優化，如果所有頁面最終都被請求，您的 Next.js 伺服器的記憶體佔用最終也會相同。
0 commit comments