你们开发 vite+vue3 项目，打开 vue devtools 页面不卡吗？
gefangshuai · lifedever · 2022-08-14 20:48:43 +08:00 · 3090 次点击这是一个创建于 817 天前的主题，其中的信息可能已经有所发展或是发生改变。
我用同一个页面这边测试了几个浏览器：
- Microsoft Edge：巨卡
- Vivaldi：巨卡
- Chrome 轻微卡顿
项目用了 Ant Design Vue 3.2 ，有时候路由跳转卡三四秒钟才会显示新页面。有时候点击下拉菜单，卡一两秒才会展开选项。
起初我以为是代码哪里写的有问题，当我关了 devtools 后，页面在上述浏览器丝般流畅。
真是太奇怪了，以前用 vue2.0 的时候，没遇到过这种情况。我看 devTools 里面有几个选项说是如果性能下降就关上，我关了后，卡顿并没有减轻。
大家也是同样的情况吗？项目代码并不多。
 |
1
apeople 2022-08-14 22:54:59 +08:00
我也是只要点开了 vue devtool 页就巨卡，应该是 devtool 的性能问题导致的
|
 |
2
dengshen 2022-08-15 09:06:21 +08:00 via iPhone
换个 ui 库试试
|
 |
3
ztc 2022-08-15 10:12:28 +08:00
vue devtool 确实会卡
|
 |
4
Bingchunmoli 2022-08-15 12:10:30 +08:00 via Android
要不试试其他，我 vite+vue+ts+element 没什么问题，不过我是自己写自己的东西可能不是公司的巨型项目没有可比性
|
 |
5
wu67 2022-08-15 12:23:13 +08:00
看数据量. 我自己搞的小项目, 因为数组有 2000 到 6000 项, 遍历起来那叫一块刺激, devtool 很容易卡死.
所以写的时候, 都是小心翼翼的, 先各种 filter 才敢 map slice |
 |
6
guchengzhihuan 2022-08-15 14:08:01 +08:00
卡有两个原因：
1.你当前页面渲染的 dom 数量过多，比如 Select 选择器（ 2 千个以上） 2.vue devtool 会消耗性能统计展示的信息 |
 |
7
null00 2022-08-15 17:35:29 +08:00
是的
|
 |
8
gefangshuai OP @guchengzhihuan 感觉应该是 devtools 优化的问题，首先没多少代码量，没有多少 dom 节点，再一个关了 devtools 后，马上丝般顺滑
|
 |
9
soseek 2022-08-17 00:13:11 +08:00 via Android
我也碰到过，还以为项目有性能问题，结果下次换了台没有 vue devtool 的电脑开发，居然丝滑了，导致现在都是禁用了 devtool
|
Select Language