前端打包时出现node内存溢出

文章讲述了前端项目打包时因工程过大导致内存消耗过多的问题,介绍了Node的内存限制以及如何通过调整`--max-old-space-size`或使用vue-cli中的`fix-memory-limit`脚本来解决,分别适用于vue-cli2和vue-cli3/4版本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

通常我们在打包前端项目时,工程过大的时候会出现打包很慢的情况

原因

在Node中通过JavaScript使用内存时只能使用部分内存(64位系统:1.4GB,32位系统:0.7GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源, 如果超出了V8引擎对Node默认的内存限制大小时,就会产生内存泄露(JavaScript heap out of memory)的错误。

解决方案

既然V8引擎有对Node进行默认的内存限制大小,那么在Node内存不足的时候,可以放宽内存大小的使用限制,可以在Node启动的时候,传递–max-old-space-size或–max-new-space-size来调整内存大小的使用限制。

修改

vue-cli2解决方法:

npm run dev 和 npm run build 直接在前面加上--max_old_space_size=4096

"scripts": {

  "start": "npm run dev",

  "dev": "node --max_old_space_size=4096 build/dev-server.js",

  "build": "node --max_old_space_size=4096 build/build.js",

  "lint": "eslint --ext .js,.vue src", "pre": "node build/pre.js",

  "dll": "rimraf dist && webpack --progress --colors --config build/webpack.dll.conf.js"

},

vue-cli3\vue-cli4解决方法:

1、scripts中添加一句指令 "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"

"scripts": {

  "serve": "vue-cli-service serve",

  "build": "vue-cli-service build",

  "test:unit": "vue-cli-service test:unit",

  "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"

},

2、安装两个npm包 : increase-memory-limit 和cross-env
3、安装完成后,先执行一次 npm run fix-memory-limit,然后启动/打包即可

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值