内存使用
随着应用程序的增长和功能的丰富，它们在本地开发或创建生产构建时可能需要更多资源。
让我们探讨一些策略和技术，以优化内存并解决 Next.js 中的常见内存问题。
减少依赖项数量
具有大量依赖项的应用程序将使用更多内存。
捆绑分析器可以帮助你调查应用程序中可能可以删除的大型依赖项，以提高性能和内存使用率。
尝试 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 构建时，将 --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禁用静态分析
类型检查和 linting 可能会占用大量内存，尤其是在大型项目中。但是，大多数项目都有一个专用的 CI 运行器来处理这些任务。当构建在“Linting and checking validity of types”步骤中产生内存不足问题时，你可以在构建期间禁用这些任务
/** @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请记住，这可能会由于类型错误或 linting 问题而导致错误的部署。我们强烈建议仅在静态分析完成后才将构建提升到生产环境。如果你部署到 Vercel，你可以查看用于暂存部署的指南，以了解如何在自定义任务成功后将构建提升到生产环境。
禁用 source maps
生成 source maps 会在构建过程中消耗额外的内存。
你可以通过在你的 Next.js 配置中添加 productionBrowserSourceMaps: false 和 experimental.serverSourceMaps: false 来禁用 source map 生成。
须知：某些插件可能会启用 source maps，并且可能需要自定义配置才能禁用。
Edge 内存问题
Next.js v14.1.3 修复了使用 Edge 运行时时的内存问题。请更新到此版本（或更高版本）以查看它是否解决了你的问题。
这有帮助吗？