1、问题
前端项目,随着项目文件越来越多,打包和编辑的时间也越来越长,编辑时占用的内存也随之增多。长此以往,会出现JavaScript heap out of memory,导致编译失败。
2 问题产生的原因
JavaScript 内存不足,原因在于 Node 中通过script使用的内存只是很小的一部分(64位系统下约为1.4 GB,32位系统下约为0.7 GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源,如果超出了V8引擎对Node默认的内存限制大小时,就会产生内存泄露(JavaScript heap out of memory)的错误。
通过上面的分析,可以看出解决方式也无非两类,一是优化文件打包的体积,二是扩大编译时的内存。
3、解决方案
3.1 通过increase-memory-limit
插件修改内存
- 安装两个npm包 : increase-memory-limit 和cross-env
npm install -save increase-memory-limit,cross-env
- 在package.json中,增加
scriptes
脚本
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"fix-memory-limit":"cross-env LIMIT=4096 increase-memory-limit"
},
- 运行使命脚本
npm run fix-memory-limit
- 正常运行
npm run serve
如果执行成功,看一下问题是否解决
如果执行失败,报错node --max-old-space-size=4096 不是内部或外部命令,也不是可运行的程序或
,则可以进行下面这步,
修改node_modules/.bin/vue-cli-service.cmd
文件,把“%_prog%”
去掉双引号
文件示例:
3.2 直接通过max_old_space_size设置
看网上有人说可以直接设置,当我本地环境并未改善,后来还采用3.1中插件的方式来解决,但还是贴在这,也许是设置的试不对,或者其他人可以
"scripts": {
"build": "vue-cli-service build && node --max_old_space_size=4096",
},