内存使用

随着应用程序变得更加功能丰富,它们在本地开发或创建生产构建时可能会需要更多资源。

让我们探讨一些策略和技巧来优化内存并解决 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 中,你可以打开 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 配置来禁用此行为:

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",
      });
      config.cache.maxMemoryGenerations = 0;
    }
    // 重要:返回修改后的配置
    return config;
  },
};
 
export default nextConfig;

禁用源映射

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

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

值得注意的是: 一些插件可能会开启源映射,可能需要自定义配置来禁用。

Edge 内存问题

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