Skip to main content

内存使用情况

随着应用的增长和功能变得更加丰富，它们在本地开发或创建生产版本时可能需要更多资源。

¥As applications grow and become more feature rich, they can demand more resources when developing locally or creating production builds.

让我们探索一些优化内存并解决 Next.js 中常见内存问题的策略和技术。

¥Let's explore some strategies and techniques to optimize memory and address common memory issues in Next.js.

减少依赖数量​

¥Reduce number of dependencies

具有大量依赖的应用将使用更多内存。

¥Applications with a large amount of dependencies will use more memory.

打包分析器 可以帮助你调查应用中的大型依赖，这些依赖可以被删除以提高性能和内存使用率。

¥The Bundle Analyzer can help you investigate large dependencies in your application that may be able to be removed to improve performance and memory usage.

尝试 experimental.webpackMemoryOptimizations​

¥Try experimental.webpackMemoryOptimizations

从 v15.0.0 开始，你可以将 experimental.webpackMemoryOptimizations: true 添加到 next.config.js 文件中以更改 Webpack 中的行为，从而减少最大内存使用量，但可能会稍微增加编译时间。

¥Starting in v15.0.0, you can add experimental.webpackMemoryOptimizations: true to your next.config.js file to change behavior in Webpack that reduces max memory usage but may increase compilation times by a slight amount.

很高兴知道：此功能目前处于实验阶段，将首先在更多项目上进行测试，但被认为是低风险的。

¥Good to know: This feature is currently experimental to test on more projects first, but it is considered to be low-risk.

运行 next build 和 --experimental-debug-memory-usage​

¥Run next build with --experimental-debug-memory-usage

从 14.2.0 开始，你可以运行 next build --experimental-debug-memory-usage 以一种模式运行构建，其中 Next.js 将在整个构建过程中连续打印有关内存使用情况的信息，例如堆使用情况和垃圾收集统计信息。当内存使用量接近配置的限制时，也会自动拍摄堆快照。

¥Starting in 14.2.0, you can run next build --experimental-debug-memory-usage to run the build in a mode where Next.js will print out information about memory usage continuously throughout the build, such as heap usage and garbage collection statistics. Heap snapshots will also be taken automatically when memory usage gets close to the configured limit.

很高兴知道：此功能与自动启用的 Webpack 构建工作选项不兼容，除非你有自定义 webpack 配置。

¥Good to know: This feature is not compatible with the Webpack build worker option which is auto-enabled unless you have custom webpack config.

记录堆配置文件​

¥Record a heap profile

要查找内存问题，你可以从 Node.js 记录堆配置文件并将其加载到 Chrome DevTools 中，以识别潜在的内存泄漏源。

¥To look for memory issues, you can record a heap profile from Node.js and load it in Chrome DevTools to identify potential sources of memory leaks.

在终端中，启动 Next.js 构建时将 --heap-prof 标志传递给 Node.js：

¥In your terminal, pass the --heap-prof flag to Node.js when starting your Next.js build:

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

构建结束时，Node.js 将创建一个 .heapprofile 文件。

¥At the end of the build, a .heapprofile file will be created by Node.js.

在 Chrome DevTools 中，你可以打开 Memory 选项卡并单击 "负载曲线" 按钮来可视化该文件。

¥In Chrome DevTools, you can open the Memory tab and click on the "Load Profile" button to visualize the file.

分析堆快照​

¥Analyze a snapshot of the heap

你可以使用检查器工具来分析应用的内存使用情况。

¥You can use an inspector tool to analyze the memory usage of the application.

执行 next build 或 next dev 命令时，在命令开头添加 NODE_OPTIONS=--inspect。这将在默认端口上公开检查器代理。如果你希望在任何用户代码开始之前中断，你可以传递 --inspect-brk。当进程运行时，你可以使用 Chrome DevTools 等工具连接到调试端口来记录和分析堆快照，以查看保留了哪些内存。

¥When running the next build or next dev command, add NODE_OPTIONS=--inspect to the beginning of the command. This will expose the inspector agent on the default port. If you wish to break before any user code starts, you can pass --inspect-brk instead. While the process is running, you can use a tool such as Chrome DevTools to connect to the debugging port to record and analyze a snapshot of the heap to see what memory is being retained.

从 14.2.0 开始，你还可以使用 --experimental-debug-memory-usage 标志运行 next build，以便更轻松地拍摄堆快照。

¥Starting in 14.2.0, you can also run next build with the --experimental-debug-memory-usage flag to make it easier to take heap snapshots.

在此模式下运行时，你可以随时向进程发送 SIGUSR2 信号，进程将拍摄堆快照。

¥While running in this mode, you can send a SIGUSR2 signal to the process at any point, and the process will take a heap snapshot.

堆快照将保存到 Next.js 应用的项目根目录中，并且可以在任何堆分析器（例如 Chrome DevTools）中加载，以查看保留了哪些内存。此模式尚不兼容 Webpack 构建工作线程。

¥The heap snapshot will be saved to the project root of the Next.js application and can be loaded in any heap analyzer, such as Chrome DevTools, to see what memory is retained. This mode is not yet compatible with Webpack build workers.

请参阅 如何记录和分析堆快照 了解更多信息。

¥See how to record and analyze heap snapshots for more information.

Webpack 构建工作者​

¥Webpack build worker

Webpack 构建工作器允许你在单独的 Node.js 工作器内运行 Webpack 编译，这将减少应用在构建过程中的内存使用量。

¥The Webpack build worker allows you to run Webpack compilations inside a separate Node.js worker which will decrease memory usage of your application during builds.

如果你的应用没有从 v14.1.0 开始的自定义 Webpack 配置，则默认启用此选项。

¥This option is enabled by default if your application does not have a custom Webpack configuration starting in v14.1.0.

如果你使用旧版本的 Next.js 或者你有自定义 Webpack 配置，则可以通过在 next.config.js 中设置 experimental.webpackBuildWorker: true 来启用此选项。

¥If you are using an older version of Next.js or you have a custom Webpack configuration, you can enable this option by setting experimental.webpackBuildWorker: true inside your next.config.js.

很高兴知道：此功能可能不与所有自定义 Webpack 插件兼容。

¥Good to know: This feature may not be compatible with all custom Webpack plugins.

禁用 Webpack 缓存​

¥Disable Webpack cache

Webpack 缓存 将生成的 Webpack 模块保存在内存和/或磁盘中以提高构建速度。这有助于提高性能，但也会增加应用存储缓存数据的内存使用量。

¥The Webpack cache saves generated Webpack modules in memory and/or to disk to improve the speed of builds. This can help with performance, but it will also increase the memory usage of your application to store the cached data.

你可以通过向应用添加 自定义 Webpack 配置 来禁用此行为：

¥You can disable this behavior by adding a custom Webpack configuration to your application:

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

export default nextConfig

禁用源映射​

¥Disable source maps

生成源映射在构建过程中会消耗额外的内存。

¥Generating source maps consumes extra memory during the build process.

你可以通过将 productionBrowserSourceMaps: false 和 experimental.serverSourceMaps: false 添加到 Next.js 配置来禁用源映射生成。

¥You can disable source map generation by adding productionBrowserSourceMaps: false and experimental.serverSourceMaps: false to your Next.js configuration.

很高兴知道：某些插件可能会打开源映射，并且可能需要自定义配置才能禁用。

¥Good to know: Some plugins may turn on source maps and may require custom configuration to disable.

边缘内存问题​

¥Edge memory issues

Next.js v14.1.3 修复了使用 Edge 运行时时的内存问题。请更新到此版本（或更高版本）以查看是否可以解决你的问题。

¥Next.js v14.1.3 fixed a memory issue when using the Edge runtime. Please update to this version (or later) to see if it addresses your issue.