Subscribe on changes!

Memory Leak when using a Component vs DIV in Chrome

avatar
Jul 1st 2022

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVU82OmzAQfpUplxAp2ImqSlVEkKrtZZ+gh9KDF4bEEdiWbUhWiHfvGJMtkXpoT3g88/0wMx6Tb8awocfkmOSustJ4cOh7U5QKQHZGWw+b6iJUhZvV1QgWG5igsbqDDeHXyVeP3ZJhPARBYC6otHIeIh2cQOENXuYg3ZbqT4EkjKM8aaQ/fy0psvWqPNpBtGm6hVMBY7gm1VDN6LpHZnp3SUfwePfHRYfdtK3T7Q687PAI34VHpvSNKCZiBph28PnLf2iQr7ViI1sCpGm4mxHhwIIWFGuxDA77/f6huJxzHntO3aaAgKYlxNz7/FOWwY8LKuidVGcQUMsBOuy0fQfpoGpRKKyhNyAc4N1g5SnMsogOxUPWaHsqk+AIpIq2y6QYx8UkdQmmKedUPKP+rvuiaawKlV+pKxzQfnhQusYNWQrDE8q373C2+vbhJTDm81L8s6NQXUSCnK/6kuySuGRZJwy7Oq1ocecZEemcILrjY2plQosX4jK5eG/ckXPXVGEbr45pe+Z0YrZXYVoMXZe9kW2HlojLZPfgiGv0TFPViiiqVvd10wqLrNIdF1dx5618czxC+IEd2NclYJ1UM++8AaWa6FcebyM8vufhh4nkrtW+oBWJnzik525MvwH69D90

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.

image

npm i chance and change the import 'chance' to import Chance from 'chance' in App.vue and update the path to Item.vue.

image

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

image

Start recording for ~120 seconds

Result when using div

image

Open App.vue and comment out the div comment back in the Item

image

Repeat steps in Chrome profiler and record for ~120seconds

Result when using Item image

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.

avatar
Jul 1st 2022

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.

avatar
Jul 1st 2022

@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!

avatar
Jul 1st 2022

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

avatar
Jul 1st 2022

@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.

avatar
Jul 2nd 2022

Please after npm run build test again, thanks! image

avatar
Jul 2nd 2022

@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 image

When using a component image