当我在跑一个vue项目时,响应极其慢,后来按了F12才发现是app.vue加载时间过长导致的,也就以为是包太大了。

但是没过一会,项目被force stop了,翻了一下日志才发现是内存的锅

oom

大概意思就是:JavaScript内存不足,因为我的项目是vue项目 运行在node环境,所以应该是node内存溢出之类的问题

其原因是JavaScript 内存不足,指的就是Node,Node 基于V8引擎, Node 中通过script使用的内存只是很小的一部分(64位系统下约为1.4 GB,32位系统下约为0.7 GB),当我们的开发中包比较大时,就容易形成内存不足(本文中的包大约为600Mb)

packages

既然原因知道了,接下来就是修复这个问题

方法一:

setx NODE_OPTIONS --max_old_space_size=8176

其原理就是设置node的最大内存,和java的-XmX很类似,这样可以有一定程度上的帮助。 但是要注意的是,如果参数设置过小,依旧可能会引发oom问题,所以建议根据自己电脑的配置来设置参数

方法二:

依赖increase-memory-limit插件,增加node服务器内存限制

首先执行:

npm install increase-memory-limit

下载increase-memory-limit之后 在scripts中增加一句设置内存的代码

"scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint --color .",
    "lint:fix": "eslint --color --fix .",
    "style": "prettier -c .",
    "style:fix": "prettier -w .",
    "fix-memory-limit": "cross-env LIMIT=8048 increase-memory-limit"
  },

接下来在项目根目录执行

npm run fix-memory-limit

重新 npm run dev 以应用设置即可