Memory Leak when using a Component vs DIV in Chrome
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
Create a standard vue app using vite with npm init vite
name app and select vue
cd vue-app
npm i
Use the App.vue
from the playground example, add a Item.vue
to the components folder.
npm i chance
and change the import 'chance'
to import Chance from 'chance'
in App.vue
and update the path to Item.vue
.
Note Chance may not be needed I was just using it locally to get different text, you may be able to remove it completely and just set the text to a static string
npm run dev
and open localhost:3000
in Chrome
Open the Chrome profile window and swap to the performance tab. Set to capture memory only
Start recording for ~120 seconds
Result when using div
Open App.vue
and comment out the div
comment back in the Item
Repeat steps in Chrome profiler and record for ~120seconds
Result when using Item
What is expected?
Nodes and memory should not continue to grow forever. Profile chart for Item
should look similar to that of div
What is actually happening?
Nodes and memory are constantly growing and never being garbage collected when using a Vue Component instead of a simple div
System Info
System:
OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Memory: 27.68 GB / 31.32 GB
Container: Yes
Shell: 3.2.2 - /usr/bin/fish
Binaries:
Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v14.18.3/bin/npm
Browsers:
Chrome: 102.0.5005.61
npmPackages:
vue: ^3.2.25 => 3.2.37
* Note I am running WSL2 actual system is Windows 11 running Chrome 103.0.5060.66 (Official Build) (64-bit)
Any additional comments?
This bug came up when creating an application that needs to cycle and transition a lot of element over many hours. We noticed memory usage was constantly increasing and there did not seem to be any unhandled listeners or references that would be keeping things in memory. I then created this minimal demo to confirm that regardless of component complexity the problem is there.
Possibly related to #5363 however the chromium team has claimed to fix is already fixed in 103 (https://bugs.chromium.org/p/chromium/issues/detail?id=1324096) but clearly there is still an issue here.
It would make it much easier for us if you could just provide the repository to clone instead of providing instructions how to create a project for the reproduction from scratch. That also eliminates any change of us creating different circumstances that you had when you reproduced it.
Could you do that? thanks.
@LinusBorg absolutely here ya go. https://github.com/aphex/vue-memory-test
I assumed that was the purpose of requiring the SFC playground link and why you all didn't ask for a repo in the walkthrough.
Let me know if you need anything else, thanks!
Thanks!
I assumed that was the purpose of requiring the SFC playground link and why you all didn't ask for a repo in the walkthrough.
Do you mean this, from the issue form?
The easiest way to provide a reproduction is by showing the bug in The SFC Playground. If it cannot be reproduced in the playground and requires a proper build setup, try StackBlitz. If neither of these are suitable, you can always provide a GitHub repository
@LinusBorg Yup that's the one. I didn't realize I needed both SFC and repo. Doesn't matter now though you got them all :).
If you need me to put together anything else just let me know.
I know this is a bit of a rare situation as I suspect most people would never really see this as they are not adding and removing so many elements like this. Still seems concerning though, obviously don't want Vue to not be able to be cleaned up.
@liulinboyi I don't know why I didn't do this in the first place, making assumptions again 🤦♂️
Thanks for taking the time to check into it. My results are looking fine when built. Not sure if you want to keep this open for dev mode, seems minor. I also tested this back to chromium 89 and saw the same results, so it is unlikely related to the chromium issue I mentioned.
When using a div
When using a component