Linux 构建 Vue 项目报错 JavaScript heap out of memory(2024/06/26)

Linux 构建 Vue 项目报错 JavaScript heap out of memory(2024/06/26)

文章目录

    • [Linux 构建 Vue 项目报错 JavaScript heap out of memory(2024/06/26)](#Linux 构建 Vue 项目报错 JavaScript heap out of memory(2024/06/26))
      • [一. 产生环境](#一. 产生环境)
      • [二. 问题描述](#二. 问题描述)
      • [三. 原因分析](#三. 原因分析)
      • [四. 解决方法](#四. 解决方法)
      • [五. 疑问](#五. 疑问)

一. 产生环境

  • Debian GNU/Linux 12;
  • NodeJS 16.19.0;

二. 问题描述

在 Linux 环境下,通过 npm run build 构建 Vue 项目的时候遇到如下错误:

shell 复制代码
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

三. 原因分析

根据报错信息可知是堆内存空间不足导致的,但构建所用的 Linux 机器物理内存为 256G,通过监控资源占用发现在 node 构建时内存并未占满,所以猜测是系统对进程所用的最大内存进行了限制。可能的限制如下:

  1. 查看 Linux 系统对进程可分配最大内存的限制;

    shell 复制代码
    $ ulimit -m
    unlimited

    结果为 unlimited,即不限制,因此不是系统限制了进程所能分配的最大内存。

  2. 查看 Node.js 的默认内存限制;

    shell 复制代码
    $ node -e "console.log(v8.getHeapStatistics().heap_size_limit / 1024 / 1024 + ' MB')"
    4144 MB

    结果为 4144 MB,显而易见问题出在这里,Node.js 的默认内存限制太小导致构建时获取不到足够的堆内存。

四. 解决方法

调整 Node.js 的默认内存限制,例如增加到 16G,下面介绍两种实现方法(原理相同):

  1. 命令行设置环境变量;

    • Windows

      shell 复制代码
      $ set NODE_OPTIONS="--max_old_space_size=16384" && npm run build
    • Linux

      shell 复制代码
      $ export NODE_OPTIONS="--max_old_space_size=16384" && npm run build
  2. package.json 的 scripts 部分直接增加内存限制;

    • Windows

      json 复制代码
      "scripts": {
        "build": "set NODE_OPTIONS='--max_old_space_size=16384' && vue-cli-service build"
      }
    • Linux

      json 复制代码
      "scripts": {
        "build": "NODE_OPTIONS='--max_old_space_size=16384' vue-cli-service build"
      }
    • 跨平台

      shell 复制代码
      $ npm install cross-env
      json 复制代码
      "scripts": {
        "build": "cross-env NODE_OPTIONS='--max_old_space_size=16384' vue-cli-service build"
      }

五. 疑问

Windows 环境下 Node.js 的默认内存限制也是 4144 MB,但是在不增加 Node.js 默认内存限制的情况下可以构建成功,原因不详???

相关推荐
算是难了13 小时前
Nestjs学习总结_3
前端·typescript·node.js
RONIN13 小时前
VUE开发环境配置基础(构建工具→单文件组件SFC→css预处理器sass→eslint)及安装脚手架
vue.js
kyriewen1113 小时前
项目做了一半想重写?这套前端架构让你少走3年弯路
前端·javascript·chrome·架构·ecmascript·html5
RONIN13 小时前
vue2、vue3区别之混入mixins和过滤器filter
vue.js
北山有鸟13 小时前
【学习笔记】MIPI CSI-2 协议全解析:从底层封包到像素解析
linux·驱动开发·笔记·学习·相机
RONIN13 小时前
属性透传attribute、vue实例对象方法$nextTick()、虚拟dom与浏览器渲染机制
vue.js
mounter62514 小时前
深度解析:Linux 内核为何要移除“直接映射” (Direct Map)?
linux·运维·服务器·security·linux kernel·direct mem map
RONIN14 小时前
vue自定义指令与自定义插件
vue.js
WayneYang14 小时前
Node.js 全栈知识点详细整理(含代码示例 + 前端结合实战)
前端·node.js
工頁光軍14 小时前
OpenAI NodeJs版使用案列
node.js·oneapi