vue.js有什么性能调优工具?

Question

项目现在从一个地址转到另一个地址的过渡时长太长了. 这个操作汲及好多组件（不算ui库）的。现在想找到哪个组件的执行时长最长，这样方便定位问题

@vue/devtools只能看出执行了什么组件，及这组件的用时。这里面还包括一些ui库的组件，不能很直观的看出哪些组件执行时长排行

chrome的perform中文件左侧的数字表示执行用时吗?

Answer 1

1. 首先要确认卡点，比如是不是路由守卫在加载，一般来说很少会卡住走不了
2. 所以可以先判断界面是否冻结，也即 js 在大量计算
3. 如果不是的话，就找到关键节点修复就好
4. 如果界面已冻结，可以抓火焰图看看
5. 性能问题一般都比较复杂，不好分析，可能也没有一键式的调优工具