内存使用

随着应用功能日益丰富和规模增长，在本地开发或构建生产版本时可能会占用更多资源。

下面我们将探讨一些优化内存的策略和技巧，解决 Next.js 中常见的内存问题。

减少依赖项数量

依赖项较多的应用会占用更多内存。

打包分析器 可以帮助你排查应用中可能移除的大型依赖项，从而提升性能和减少内存占用。

使用 --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 构建时，向 Node.js 传递 --heap-prof 标志：

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',
      })
    }
    // 重要：返回修改后的配置
    return config
  },
}

export default nextConfig

禁用源码映射

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

你可以在 Next.js 配置中添加 productionBrowserSourceMaps: false 和 experimental.serverSourceMaps: false 来禁用源码映射生成。

须知：某些插件可能会启用源码映射，可能需要自定义配置才能禁用。

Edge 运行时内存问题

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