Vue项目性能优化:CPU满载与内存溢出实战

3,798 阅读3分钟

背景:最近后台的 Vue项目测试环境自动打包经常失败。需要手动打包静态文件放到网站目录。
因测试机器存放了很多个前端项目以及后端项目。相关的项目访问速度很慢或者白屏。
技术老大说服务器挂着一堆前端进程占用CPU,不归他们后端处理。那只能我来了。

CPU满了排查:

top看CPU满负荷状态

image.png

执行top命令查看是哪些进程作怪?

image.png
发现有大量的vite进程正在使用大量的 CPU 资源。每个 vite 进程都占用了大约 26-27% 的 CPU 查看所有vite进程及其父进程(查看所有vite的进程树

tree -p | grep vite

可以看到:

每个vite进程都是由node进程启动的,而node进程又是由bash(脚本)进程启动的
查看vite 和 node 和 bash 的详细内容

执行 ps -fp 进程id 发现都是同一个命令启用的vite进程。

1714464157418.png

溯源bash脚本

发现都是同一个脚本 image.png

现在去寻找1KChmxEgqgRthRtsUk6g9NaLeM5WyZqSl7NzbqErz4ec7pNO 这个脚本。
可以看到只有相对目录,没有完整目录。
这个脚本是宝塔的webhook执行的。去webhook看看。
在软件商店 webhook-设置 点击一个脚本看看其存放目录。

image.png

image.png

image.png

找到脚本内容和项目目录。
接下来分析脚本内容。
查看项目的packages.scripts
可以看到yarn build:dev 正对应着命令 vite build --mode test。

和ps -fp 1001 输出的启动vite进程的命令一致

image.png

找到问题源头:vite build --mode test 命令。

继续分析这个命令 单独执行这个命令。打包一直卡主

验证解决方法

这个项目打包前。批量杀掉 vite相关进程 pkill -f vite。释放下cpu资源。 image.png
然后再次打包,发现也是一直卡主。
但是此时cpu 和 内存 都有很多空闲。

猜测是否是注册源【测试过发现不是,主要是依赖包】的问题?卸载掉依赖包,重新安装包。下面都试试。

yarn config set registry <https://registry.npm.taobao.org>
yarn config set registry <https://registry.npmmirror.com/>
rm -rf node_modules yarn.lock  
yarn  
yarn build:dev

执行yarn build:dev命令打包,界面开始动了

image.png

新的问题:内存溢出

nodejs默认内存约1.5GB
猜测是项目依赖包越来越大导致内存不够用。直接配置成8G
"build:dev": "NODE_OPTIONS=--max_old_space_size=8192 vite build --mode test"
防止会出现内存不够用的情况。优化下 修改vite配置,不生成源码映射,减少内存消耗

build: {
  sourcemap: false',
}

再次执行yarn build:dev
成功! 钉钉也终于收到了更新成功的推送消息。

image.png

打包前 可用内存在4G 打包可以看到 被node 接管了 应该是设置了node内存原因(现在和其他vite项目一致了)

image.png

1714463404511.png

然后可以看到打包尾声的时候剩下内存不多。所以容错率很低,如果这时候其他服务占用多一点资源。就没办法完成打包。

image.png

结论:

1.依赖包有问题【构建项目时卡主 并且vite进程不自动释放。导致进程不断增多】
2.内存不足问题 【node内存1.5G限制 + 机器可用内存不足。导致偶尔会打包失败】 开发服务器只有8G内存 而且日常被其他服务占用5G多。可用只有3G不到。
随着前端项目依赖的包越来越多 这点内存捉襟见肘了。
最终方案还是提高点内存好点。毕竟随着业务和人员的变化,依赖的东西只会越来越多。

生产环境为什么没这个问题
因为:生产发布是在开发本地机器上构建后提交到dist分支并上传静态资源到OSS
然后技术老大拉取打包后的分支代码即可完成更新