vue项目运行报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢,估计项目过大了。解决方案一:通过 package.json 中的 "build" 加大内存/* package.json 文件 */"scripts"...
项目更改时 频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。
/deep/ .el-button {
box-sizing: border-box;
margin-left: 0;
margin-right: 10px;
padding: 0 10px !important;
}
在vue组件中因为/deep的原因导致的问题。后来发现css的层级较深时也会出现内存溢出这个问题。
项目运行时
windows 下的 vue 项目 dev 环境可以加到./node_modules/.bin/webpack-dev-server.cmd
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node --max-old-space-size=4096 "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
)
打包时
node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。
解决方案一:通过 package.json 中的 "build" 加大内存
/* package.json 文件 */
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "set NODE_ENV=production && node --max_old_space_size=8000 build/build.js",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e"
},
解决方案二:使用 increase-memory-limit 插件,增加node服务器内存限制
/* package.json 文件 */
"devDependencies": {
"increase-memory-limit": "^1.0.6",
},
/* 添加 fix-memory-limit */
"scripts": {
"fix-memory-limit": "cross-env LIMIT=8096 increase-memory-limit"
}
//新增依赖包npm install --save-dev increase-memory-limit,或者重新 npm install 全量更新
//执行npm run fix-memory-limit(只需执行一次即可)
//重启项目即可
知识点扩展:
CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 JavaScript 其实就是 Node,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中,在基本的内存使用上没有什么限制,但是我去查阅了相关的资料才发现,在 Node 中通过 JavaScript 使用内存时只能使用部分内存(64位系统下约为1.4 GB,32位系统下约为0.7 GB),这就是我们编译项目时为什么会出现内存泄露了,因为前端项目如果非常的庞大,webpack 编译时就会占用很多的系统资源,如果超出了V8对 Node 默认的内存限制大小就会出现刚刚我截图的那个错误了,那怎么解决呢?V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制,示例如下
node --max-old-space-size=1700 test.js // 单位为MB
// 或者
node --max-new-space-size=1024 test.js // 单位为KB
上述参数在V8初始化时生效,一旦生效就不能再动态改变。如果遇到 Node 无法分配足够内存给 JavaScript 的情况,可以用这个办法来放宽V8默认的内存限制,避免在执行过程中稍微多用了一些内存就轻易崩溃,既然知道了解决办法那就好办了,下面来分别详细说明三大框架下的具体操作。
Vue
先说vue,因为vue是最简单的,因为基于 vue-cli 生成的项目,vue没有把 package.json 里面 scripts 字段的脚本命令的node命令隐藏起来,我们直接把上面v8提供的选项参数直接写入scripts 字段的 node 命令后就好了,示例如下
“build”: “node --max_old_space_size=4096 build/build.js”
直接在 node 后面写上 --max_old_space_size=4096 就好了,我这里设置的内存大小是4G,这个具体的大小可以根据自己的项目情况来设置就好了。然后再重新运行 npm run build 就可以正常打包构建了。
更多推荐
所有评论(0)