Since 3.2.41, devtools spends a lot of time in cleanupBuffer during component unmounts

[Mario34]

Vue version

3.2.45

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UstugzAQ/JWtL02kgJM+LhGJqPoJvfqSgClugm3ZC6mE+PeucUtJKvUEOzM7Y4/csxdr066VbMsyXzhlEbzE1u6FVo01DqGHTjqvjF6BkxUMUDnTwD3t3E+aV0NfLTV+kymfkGBOwsJoj6D8W20usAtOC3StXAqd8ZhLiTSgbOz5gJImgKze7Gk976czwDBknNCRPbaIBOXFWRWnnWCLyf4u/i0F2/uLwqLOeBTHxZ8Q6BJV0WJUkziwxP9ep0sq44JCl/ITlIbNer0WDHg04rPjzga2YrGYpDnY9MMbTfX2YYOcRsILtoURCRjdMcyC1YjWbzlvtT29p4VpeE4cd61G1cikNE3+mD6kT8+8VB7neCp9kxyduXjpKFGw1cycE0gFJk7SNZx0/4bdaK8Cb7g/oSFzEHqgAq4eQHhds6oEZqXqxgoFXgljq5GcFzp8AVvZ64o=

Steps to reproduce

• Click the switch button to uninstall the components on the page
• Compare version 3.2.40 and version 3.2.45

What is expected?

Component uninstallation time is consistent with the performance of version 3.2.40

What is actually happening?

There is a significant time difference between version 3.2.45 and version 3.2.40 when components are unmount

System Info

No response

Any additional comments?

No response

[Mario34]

I upgraded from 3.2.38 to 3.2.45 in order to solve problems related to #5657 , but became very slow when switching pages.

[LinusBorg]

The slowdown seems to happen because of a devtools hook, actually. if you run 3.2.45 in a private tab without Vue devtools, the flame graph looks like 3.3.40, pretty much.

In 3.2.45, it seems to spend a lot of time here:

devtools/packages/app-backend-core/src/hook.ts

Line 228 in 60aeed2

this._buffer = this._buffer.filter(args => !this._bufferToRemove.has(args) && now - args[0] < 10_000)

I'll move this to devtools

/cc @Akryum

[LinusBorg]

It seems that 60aeed2 will solve this once released.

Correct @Akryum ?

[pavelhoral]

For me the slowdown happened when going from vue 3.2.37 to 3.2.38, but feels like it is the same as this issue...

The difference in my case is going from 100ms page update to 70s page update, thus changing developer experience to complete rubbish.

https://profiler.firefox.com/public/jw0yrsbxf8zccyf5qgapyp01h9smh0ztfnkd0g0/flame-graph/?globalTrackOrder=01&implementation=js&thread=1&v=8

Update: not sure about the specific version change - just tried back with 3.2.37 and the performance is still bad. So it might be connected to some other upgrade i did (e.g. Vite to 4.0.0).

[sohaha]

This problem bothered me for a long time, and I eventually found that downgrading the vue version to 3.2.40 improved it, but it was not a good solution.

[seanogdev]

Any chance of a beta release soon?

[mkierdev]

@LinusBorg @Akryum is there any progress about this issue? Devtools are not usable due to this bug, the performance slowdown is to much to handle any development (nuxt 3).

[LinusBorg]

In m understanding this issue was solved (and this this issue closed) with devtools 6.5.

Are you on that version?

I personally saw good performance aftrr updating to 6.5

[mkierdev]

I was on 6.5, however after your comment I disabled Performance monitoring and Update tracking in settings.

I can observe performance upgrade, however it's still not the DX I remember while developing on Vue 2.
But disabling these options helped a lot and it seems that it can be finally usable.

Issue is still open so I assumed it wasn't implemented.

[LinusBorg]

I'll close this for now, but we will keep an eye on general performance anyway going forward. This particual area has been made more performant so we will need to look into other things from here on out.