2023.6.28 - vue项目打包内存堆栈溢出JS stacktrace

发布时间 2023-06-28 14:54:25作者: 吕业浩


vue项目打包时报错,JS stacktrace : Reached heap limit Allocation failed - JavaScript heap out of memory
这是因为node打包时是有内存空间限制的,node能分配多少空间,默认是根据电脑内存占比来算的。在内存比较小的电脑里,默认分配给node的内存可能不足以支撑起项目运行或者打包。这时就需要手动配置node运行内存,确保项目进程运行时正常有足够的内存完成操作。

下面是配置方法:
在vue 的 package.json文件里找到需要运行的命令加上NODE_OPTIONS=\"--max-old-space-size=4096\"即可。
4096 = 1024 * 4 也就是分配4G内存

要在 package.json 文件中设置增加 Node 内存的选项,可以在 scripts 部分的打包命令中添加环境变量。

例如,假设您的打包命令是 "build": "vite build",您可以将其修改为以下形式:

"scripts": {
  "build": "NODE_OPTIONS=\"--max-old-space-size=4096\" vite build"
}

这样,当您运行 npm run build 命令时,Node 的内存限制将增加到 4096MB。您可以根据需要调整此值。

分配内存够用就好

分配更大的内存给Node并不一定意味着应用程序会更流畅。虽然增加堆内存大小可能有助于处理更大的数据量或复杂的任务,但它也会带来一些潜在的问题。

首先,分配更多的内存可能会导致更长的垃圾回收(GC)暂停时间。当Node的堆内存增加时,垃圾回收器需要更长的时间来清理内存并释放未使用的对象。这可能会导致应用程序在GC期间出现短暂的停顿,影响响应时间和流畅性。

其次,分配过多的内存可能会导致系统资源的浪费。如果应用程序实际上并不需要大量的内存来执行任务,那么分配更多的内存只会浪费系统资源,并且可能影响其他应用程序的性能。

因此,要确定适当的内存分配大小,需要根据应用程序的实际需求进行评估和测试。如果应用程序在当前分配的内存下运行良好,则没有必要分配更多的内存。如果应用程序因内存不足而出现性能问题或崩溃,则可以逐步增加内存分配,并进行性能测试和监测,以找到最佳的内存配置。