11---
2- source-updated-at : 2025-05-16T04:52:11 .000Z
3- translation-updated-at : 2025-05-19T23:03:16.407Z
2+ source-updated-at : 2025-06-05T15:29:30 .000Z
3+ translation-updated-at : 2025-06-05T23:37:28.859Z
44title : 如何优化内存使用
5- nav_title : 内存优化
6- description : 优化开发与生产环境中应用程序的内存占用 。
5+ nav_title : 内存使用
6+ description : 优化开发和生产环境中应用程序的内存占用 。
77---
88
9- 随着应用功能日益丰富，在本地开发或构建生产版本时可能会消耗更多资源 。
9+ 随着应用程序功能日益丰富，在本地开发或构建生产环境时可能会消耗更多资源 。
1010
11- 下面我们将探讨 Next.js 中优化内存和解决常见内存问题的策略与技巧 。
11+ 下面我们将探讨优化内存和解决 Next.js 中常见内存问题的策略与技巧 。
1212
1313## 减少依赖项数量
1414
15- 依赖项较多的应用会占用更多内存 。
15+ 依赖项较多的应用程序会占用更多内存 。
1616
17- 通过 [ 打包分析工具 (Bundle Analyzer) ] ( /docs/app/guides/package-bundling ) 可以检查应用中是否存在可移除的大型依赖项，从而提升性能和内存使用效率 。
17+ 使用 [ 打包分析器 ] ( /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 ` 参数 ：
35+ 在终端中启动 Next.js 构建时，向 Node.js 传递 ` --heap-prof ` 标志 ：
3636
3737``` sh
3838node --heap-prof node_modules/next/dist/bin/next build
3939```
4040
41- 构建结束后，Node.js 会生成 ` .heapprofile ` 文件。
41+ 构建结束后，Node.js 会生成一个 ` .heapprofile ` 文件。
4242
43- 在 Chrome DevTools 的 Memory 标签页中点击 "Load Profile" 按钮即可可视化分析该文件。
43+ 在 Chrome DevTools 的 Memory 标签页中，点击 "Load Profile" 按钮即可可视化分析该文件。
4444
4545## 分析堆内存快照
4646
47- 您可以使用调试工具分析应用的内存使用情况 。
47+ 您可以使用检查工具来分析应用程序的内存使用情况 。
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,20 @@ export default nextConfig
9494
9595## 禁用静态分析
9696
97- 类型检查和代码检查可能在大型项目中消耗大量内存。但大多数项目已有专门的 CI 流程处理这些任务。当构建在 "Linting and checking validity of types" 步骤出现内存不足问题时，可以在构建时禁用这些任务：
97+ 类型检查和代码检查可能会消耗大量内存，特别是在大型项目中。
98+ 然而，大多数项目都有专门的 CI 运行器来处理这些任务。
99+ 当构建在 "Linting and checking validity of types" 步骤中出现内存不足问题时，您可以在构建期间禁用这些任务：
98100
99101``` js filename="next.config.mjs"
100102/** @type {import('next').NextConfig} */
101103const nextConfig = {
102104 eslint: {
103- // 警告：即使项目存在 ESLint 错误，也允许构建完成
105+ // 警告：即使项目存在 ESLint 错误，此设置也允许生产构建成功完成
104106 ignoreDuringBuilds: true ,
105107 },
106108 typescript: {
107109 // !! 警告 !!
108- // 即使项目存在类型错误，也允许构建完成
110+ // 即使项目存在类型错误，也允许生产构建成功完成
109111 // !! 警告 !!
110112 ignoreBuildErrors: true ,
111113 },
@@ -117,16 +119,50 @@ export default nextConfig
117119- [ 忽略 TypeScript 错误] ( /docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production )
118120- [ Next.js 配置中的 ESLint] ( /docs/pages/api-reference/config/next-config-js/eslint )
119121
120- 请注意这可能导致因类型错误或代码问题产生有缺陷的部署。我们强烈建议仅在静态分析完成后才将构建推送到生产环境。如果您部署到 Vercel，可参阅 [ 预发布部署指南] ( https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment ) 了解如何在自定义任务成功后发布生产构建。
122+ 请注意，这可能会因类型错误或代码检查问题导致部署失败。
123+ 我们强烈建议仅在静态分析完成后才将构建推送到生产环境。如果您部署到 Vercel，可以查看[ 暂存部署指南] ( https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment ) 了解如何在自定义任务成功后提升构建至生产环境。
121124
122- ## 禁用 Source Maps
125+ ## 禁用源映射
123126
124- 生成 source maps 会额外消耗构建过程的内存 。
127+ 生成源映射会在构建过程中消耗额外内存 。
125128
126- 您可以通过在 Next.js 配置中添加 ` productionBrowserSourceMaps: false ` 和 ` experimental.serverSourceMaps: false ` 来禁用 source map 生成 。
129+ 您可以通过在 Next.js 配置中添加 ` productionBrowserSourceMaps: false ` 和 ` experimental.serverSourceMaps: false ` 来禁用源映射生成 。
127130
128- > ** 须知** ：某些插件可能会启用 source maps，可能需要额外配置才能禁用 。
131+ > ** 须知** ：某些插件可能会启用源映射，可能需要自定义配置才能禁用 。
129132
130133## Edge 运行时内存问题
131134
132- Next.js ` v14.1.3 ` 修复了使用 Edge 运行时时的内存问题。请升级至该版本（或更高版本）以确认是否解决您的问题。
135+ Next.js ` v14.1.3 ` 修复了使用 Edge 运行时的内存问题。请升级到此版本（或更高版本）以确认是否解决了您的问题。
136+
137+ ## 预加载入口
138+
139+ 当 Next.js 服务器启动时，它会将每个页面的 JavaScript 模块预加载到内存中，而不是在请求时加载。
140+
141+ 这种优化以更大的初始内存占用为代价，换取更快的响应时间。
142+
143+ 要禁用此优化，请将 ` experimental.preloadEntriesOnStart ` 标志设置为 ` false ` 。
144+
145+ ``` ts filename="next.config.ts" switcher
146+ import type { NextConfig } from ' next'
147+
148+ const : NextConfig = {
149+ experimental: {
150+ preloadEntriesOnStart: false ,
151+ },
152+ }
153+
154+ export default config
155+ ```
156+
157+ ``` js filename="next.config.mjs" switcher
158+ /** @type {import('next').NextConfig} */
159+ const config = {
160+ experimental: {
161+ preloadEntriesOnStart: false ,
162+ },
163+ }
164+
165+ export default config
166+ ```
167+
168+ Next.js 不会卸载这些 JavaScript 模块，这意味着即使禁用此优化，如果最终请求了所有页面，Next.js 服务器的内存占用最终也会相同。
0 commit comments