How to optimize memory usage

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

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

减少依赖项数量

拥有大量依赖项的应用程序将使用更多内存。

Bundle Analyzer 可以帮助你调查应用程序中可能可以移除的大型依赖项，以提高性能和减少内存使用。

尝试 `experimental.webpackMemoryOptimizations`

从 v15.0.0 开始，你可以在 next.config.js 文件中添加 experimental.webpackMemoryOptimizations: true 来改变 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 构建时向 Node.js 传递 --heap-prof 标志：

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

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

在 Chrome DevTools 中，你可以打开内存标签并点击"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 配置来禁用此行为：

next.config.mjs

/** @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

禁用静态分析

类型检查和代码检查可能需要大量内存，特别是在大型项目中。然而，大多数项目都有专门的 CI 运行器来处理这些任务。当构建在"Linting and checking validity of types"步骤中产生内存不足问题时，你可以在构建期间禁用这些任务：

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // 警告：这允许生产构建成功完成，即使
    // 你的项目有 ESLint 错误。
    ignoreDuringBuilds: true,
  },
  typescript: {
    // !! 警告 !!
    // 危险地允许生产构建成功完成，即使
    // 你的项目有类型错误。
    // !! 警告 !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

请记住，这可能会由于类型错误或代码检查问题而产生错误的部署。我们强烈建议仅在静态分析完成后才将构建提升到生产环境。如果你部署到 Vercel，可以查看临时部署指南，了解如何在自定义任务成功后将构建提升到生产环境。

禁用源映射

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

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

值得注意的是：某些插件可能会启用源映射，可能需要自定义配置来禁用。

Edge 内存问题

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