【踩坑之旅】记一次 Vue CLI dev 的编译性能问题

957 阅读2分钟

背景

接手一个 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 高优先级的操作,也验证了之前的推断。

解决

可以通过 lintOnSavechainWebpack 关闭检查即可,具体参考:官方文档

总结

遇到问题需要透过现象,一步步定位原因。