Skip to main content

内存使用

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

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

减少依赖项的数量​

依赖项较多的应用程序将使用更多的内存。

Bundle Analyzer可以帮助您调查应用程序中的大型依赖项，这些依赖项可能能够被移除，以提高性能和内存使用效率。

尝试 experimental.webpackMemoryOptimizations​

从v15.0.0开始，您可以在next.config.js文件中添加experimental.webpackMemoryOptimizations: true，以更改 Webpack 的行为，从而减少最大内存使用量，但可能会略微增加编译时间。

您需要知道: 此功能目前是实验性的，首先在更多的项目上进行测试，但它被认为是低风险的。

运行next build并带上--experimental-debug-memory-usage​

从14.2.0开始，您可以运行next build --experimental-debug-memory-usage，以在一种模式下运行构建，在该模式下 Next.js 将在整个构建过程中持续打印内存使用信息，例如堆使用情况和垃圾回收统计信息。当内存使用接近配置的限制时，也会自动拍摄堆快照。

您需要知道: 此功能与 Webpack 构建工作器选项不兼容，，除非您有自定义的 webpack 配置，否则该选项会自动启用。

记录 heap profile​

要查找内存问题，您可以从 Node.js 中记录 heap profile，并将其加载到 Chrome DevTools 中，以识别潜在的内存泄漏来源。

在终端中，当启动 Next.js 构建时，将--heap-prof标志传递给 Node.js：

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",
      });
    }
    // Important: return the modified config
    return config;
  },
};

export default nextConfig;

禁用源映射​

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

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

您需要知道: 某些插件可能启用了源映射，并且可能需要自定义配置来禁用。

Edge 内存问题​

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