devtools
devtools copied to clipboard
vuejs
Performance issues w/ large data
What problem does this feature solve?
I'm working on a TS/Vue 3 project that evolves around large-ish amount of data, thousands and tens of thousands objects in a Pinia store. Vue handles this very well, especially when marking it as raw instead of keeping it reactive (which it in most cases doesn't need to be).
Current devtools has problems handling this, however. Even after disabling component events navigating the app feels really sluggish to the point where I'm now manually disabling the whole extension to be able to develop in a meaningful way and then enabling it only when needing to debug something. (v5 and earlier versions w/ Vue 2 didn't seem to have this issue, at least to the same extent fwiw.)
Diving into the browser extension settings every few minutes is quite tedious. It would be really nice to have an easy way to deactivate the extension either from the menu icon or from the app itself.
Also, any tips on how to maybe try to debug this issue to see where the bottlenecks are would be welcome, I'd be happy to help making this less of an issue with bigger datasets.
What does the proposed API look like?
An easy to access GUI to disable the whole devtools app.
We are experiencing the same issue. I found that even reducing the dataset to just 10 rows performance is still impacted, and it seems to be due to the amount of components being used (150+ in our case).
Because we are using components for <th> & <td> our table will result in 154 components (10x14 table = 14 table headers and 140 table data cells)
I’ve written some tips for optimizing the performance: https://til.unessa.net/vue/vue-devtools-performance/
However, this ticket is spesifically about other performance issues and maybe providing a UI for disabling the extension alltogether (in an easier way than using the browser extensions UI).
I am also experiencing large performance issues with an input that filters through an array of object with Fuse.js. I ended-up over-optimising things before realising that the culprit was the devtools, so now it's blazing fast 😅 Untoggling everything and disabling component events and performance didn't do anything unfortunately, only disabling the devtools works.
Using v6.1.4, vue 3.2.33 with nuxt rc2
