The memory of a newly created project cannot be released, and the memory snapshot keeps increasing

[Joshua-Leee]

Vue version

3.3.13

Link to minimal reproduction

https://cn.vuejs.org/guide/quick-start.html

Steps to reproduce

Follow the steps on the website to create a new project and get it up and running, then click Home and About on the page to switch routes

What is expected?

When switching routes, the component memory of the old route should be released

What is actually happening?

Part of the memory is not being freed, the memory keeps increasing

System Info

macOS 10.15.7
Google Chrome 120.0.6099.109

Any additional comments?

The project developed by my company with vue3 is encountering performance problems, because there will be a lot of page data, and after opening the same route several times, the performance will obviously decline and become stuck. I thought it was the cause of keepalive, but after I removed keepalive, the problem still exists, and I also upgraded the related dependency to the latest version. But they didn't solve this problem, so I decided to verify it with the vue initialized project, and found that the newly initialized project also existed this phenomenon, memory increment, not completely released

[edison1105]

see #5256

[yyx990803]

I don't think this is related to static hoisting. This is actually caused by the devtools _buffer if you look at the retainers of the detached HTML elements, and it won't happen in production (or if you disable the devtools).

Even with the devtools _buffer, it is cleared after a short time and you won't see detached elements anymore. So I don't think the case you are seeing here in the basic hello world app is the same as the leak you are experiencing in your actual app. It may still be caused by KeepAlive. I'd recommend compare the memory snapshot and look at the retainers to make sure, and open a new issue with a new reproduction that is closer to your actual app.

[Joshua-Leee]

In fact, you can try to package the basic hello world app, use nginx to access the index.html file in the dist generated by the package, and do what I said above, you will find that the svg ICONS are not released after separation, because I use the element-plus ui library, This library uses a lot of svg ICONS, and I'm not sure if it's because the svg elements are not being freed that it's causing the subsequent memory leak issues