内存使用

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

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

减少依赖项数量

依赖项数量庞大的应用程序会使用更多内存。

可以使用 Bundle Analyzer 检查应用程序中可能可以删除的大型依赖项，以提高性能和内存使用率。

尝试 `experimental.webpackMemoryOptimizations`

从 v15.0.0 开始，你可以将 experimental.webpackMemoryOptimizations: true 添加到你的 next.config.js 文件中，以更改 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 中，你可以打开“内存”选项卡，然后单击“加载配置文件”按钮以可视化该文件。

分析堆快照

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

在运行 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 编译，这将减少构建期间应用程序的内存使用量。

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

如果您使用的是旧版本的 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',
      })
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

禁用静态分析

类型检查和代码风格检查可能会占用大量内存，尤其是在大型项目中。但是，大多数项目都有一个专门的 CI 运行器来处理这些任务。当构建在“代码风格检查和类型有效性检查”步骤期间产生内存不足问题时，您可以在构建期间禁用这些任务。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true,
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
}
 
export default nextConfig

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

禁用源映射

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

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

注意：某些插件可能会打开源映射，可能需要自定义配置才能禁用。

Edge 内存问题

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