背景:最近后台的 Vue项目测试环境自动打包经常失败。需要手动打包静态文件放到网站目录。
因测试机器存放了很多个前端项目以及后端项目。相关的项目访问速度很慢或者白屏。
技术老大说服务器挂着一堆前端进程占用CPU,不归他们后端处理。那只能我来了。
CPU满了排查:
top看CPU满负荷状态
执行top命令查看是哪些进程作怪?
发现有大量的vite进程正在使用大量的 CPU 资源。每个 vite 进程都占用了大约 26-27% 的 CPU
查看所有vite进程及其父进程(查看所有vite的进程树)
tree -p | grep vite
可以看到:
每个vite进程都是由node进程启动的,而node进程又是由bash(脚本)进程启动的
查看vite 和 node 和 bash 的详细内容
执行 ps -fp 进程id 发现都是同一个命令启用的vite进程。
溯源bash脚本
发现都是同一个脚本
现在去寻找1KChmxEgqgRthRtsUk6g9NaLeM5WyZqSl7NzbqErz4ec7pNO 这个脚本。
可以看到只有相对目录,没有完整目录。
这个脚本是宝塔的webhook执行的。去webhook看看。
在软件商店 webhook-设置 点击一个脚本看看其存放目录。
找到脚本内容和项目目录。
接下来分析脚本内容。
查看项目的packages.scripts
可以看到yarn build:dev 正对应着命令 vite build --mode test。
和ps -fp 1001 输出的启动vite进程的命令一致
找到问题源头:vite build --mode test 命令。
继续分析这个命令
单独执行这个命令。打包一直卡主
验证解决方法
这个项目打包前。批量杀掉 vite相关进程 pkill -f vite。释放下cpu资源。
然后再次打包,发现也是一直卡主。
但是此时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命令打包,界面开始动了
新的问题:内存溢出
nodejs默认内存约1.5GB
猜测是项目依赖包越来越大导致内存不够用。直接配置成8G
"build:dev": "NODE_OPTIONS=--max_old_space_size=8192 vite build --mode test"。
防止会出现内存不够用的情况。优化下
修改vite配置,不生成源码映射,减少内存消耗
build: {
sourcemap: false',
}
再次执行yarn build:dev
成功!
钉钉也终于收到了更新成功的推送消息。
打包前 可用内存在4G
打包可以看到 被node 接管了 应该是设置了node内存原因(现在和其他vite项目一致了)
然后可以看到打包尾声的时候剩下内存不多。所以容错率很低,如果这时候其他服务占用多一点资源。就没办法完成打包。
结论:
1.依赖包有问题【构建项目时卡主 并且vite进程不自动释放。导致进程不断增多】
2.内存不足问题 【node内存1.5G限制 + 机器可用内存不足。导致偶尔会打包失败】
开发服务器只有8G内存 而且日常被其他服务占用5G多。可用只有3G不到。
随着前端项目依赖的包越来越多 这点内存捉襟见肘了。
最终方案还是提高点内存好点。毕竟随着业务和人员的变化,依赖的东西只会越来越多。
生产环境为什么没这个问题?
因为:生产发布是在开发本地机器上构建后提交到dist分支并上传静态资源到OSS。
然后技术老大拉取打包后的分支代码即可完成更新。