如何优化内存使用

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

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

减少依赖数量

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

捆绑分析器可以帮助您调查应用程序中可能可以移除以提高性能和内存使用率的大型依赖项。

尝试 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 构建时，将 --heap-prof 标志传递给 Node.js。

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 编译，这将减少应用程序在构建过程中的内存使用。

从 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',
      })
    }
    // Important: return the modified config
    return config
  },
}
 
export default nextConfig

禁用静态分析

类型检查可能需要大量内存，尤其是在大型项目中。但是，大多数项目都有一个专用的 CI 运行器，它已经处理这些任务。当构建在“运行 TypeScript”步骤中出现内存不足问题时，您可以在构建过程中禁用此任务。

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

• 忽略 TypeScript 错误

请记住，这可能会因为类型错误而导致部署失败。我们强烈建议仅在静态分析完成后将构建推向生产环境。如果您部署到 Vercel，您可以查阅部署暂存指南，了解如何在自定义任务成功后将构建推向生产环境。

禁用源映射

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

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

当使用 cacheComponents 功能时，Next.js 在 next build 的预渲染阶段默认使用源映射。如果您在该阶段（“生成静态页面”之后）持续遇到内存问题，您可以尝试通过在 Next.js 配置中添加 enablePrerenderSourceMaps: false 来禁用该阶段的源映射。

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

Edge 内存问题

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

预加载入口

Next.js 服务器启动时，它会将每个页面的 JavaScript 模块预加载到内存中，而不是在请求时才加载。

此优化可缩短响应时间，但代价是初始内存占用会更大。

要禁用此优化，请将 experimental.preloadEntriesOnStart 标志设置为 false。

import type { NextConfig } from 'next'
 
const config: NextConfig = {
  experimental: {
    preloadEntriesOnStart: false,
  },
}
 
export default config

Next.js 不会卸载这些 JavaScript 模块，这意味着即使禁用此优化，如果所有页面最终都被请求，您的 Next.js 服务器的内存占用最终也会相同。