背景
接手一个 Vue CLI 2.x 构建的历史项目,代码比较庞大,其中各项依赖都比较陈旧,希望升级为 Vue CLI 4.x 版本。官方并没有提供迁移方案,所以用 4.x 创建项目后修改对应的配置,然后将 src 复制到新目录下。
问题
准备工作结束后,运行 npm run serve 命令,发现编译过程非常慢,等待数分钟且电脑 CPU 占用率高居不下,控制台也没有明确的相关日志提示。
排查
其实现象很简单,就是卡、慢,那么 CPU 高居不下也不难理解了,所以我们需要排查的是:在卡慢的时候 Vue CLI 到底在做什么。
首先切入点是 CPU 占用率,使用 htop 命令查看:
结果并不意外,是 serve 命令高占用,那么我们可以通过 PID 进一步排查原因。使用 dtruss 来追踪这个 25437 进程。追踪部分结果截图如下:
大量重复的日志输出,如 psynch_mutexwait 线程挂起等,说实话我也看不太懂,但是我发现日志中反复出现了相关 prettier 的信息,于是我推断出,此时在不断的进行着大量的静态代码检查工作。因为历史项目代码比较庞大,这个环节确实是会消耗相当多的编译时间。
最后我需要再次验证推断,因为 Vue CLI 4.x 并不对外暴露完整的 Webpack 等相关配置,需要通过 vue-cli-service inspect 命令来查看。
默认开启了 eslint 检查,而且还是 pre 高优先级的操作,也验证了之前的推断。
解决
可以通过 lintOnSave 或 chainWebpack 关闭检查即可,具体参考:官方文档
总结
遇到问题需要透过现象,一步步定位原因。