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 默认内存限制的情况下可以构建成功,原因不详???

相关推荐
To_OC1 小时前
LC 994 腐烂的橘子:人人都说是 BFS 入门题,我却写了三遍才过
javascript·算法·leetcode
如果超人不会飞6 小时前
脉络清晰的业务演进:TinyVue Timeline 时间线组件全方位实战指南
vue.js
如果超人不会飞6 小时前
从扁平到立体:掌握 TinyVue Grid 树形表格的高级实战指南
vue.js
To_OC7 小时前
LC 200 岛屿数量:经典 DFS 入门题,我第一次写居然连方向都搞错了
javascript·算法·leetcode
用户2136610035729 小时前
Vue2组件化开发与父子通信
前端·vue.js
用户2136610035729 小时前
Vue2事件系统与指令进阶
前端·vue.js
labixiong9 小时前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试
逸铭13 小时前
Day 5:三栏布局——左账号 / 中聊天 / 右工具
vue.js·electron
Flynt14 小时前
npm v12 来了:allowScripts 默认关闭,我的项目差点跑不起来
安全·npm·node.js
用户17335980753714 小时前
Vue 3 SPA 首屏优化:从 3s 到 1.2s 的 5 个实践
前端·vue.js