MDSLKTR / pouch-vue

Pouchdb bindings for Vue.js
MIT License
90 stars 17 forks source link

Memory leak when detaching components from DOM #46

Open pintaf opened 4 years ago

pintaf commented 4 years ago

Hi. I've been spending a day finding the source of a memory leak I have in my SPA. I've been able to link it to pouch-vue and adding/removing COMPONENTS from the DOM. I emphasis components, because when removing simple elements such as DIVs, the issue is not present (I haven't tried with more complicated structure not "componentized")

Here is the Allocation stacks timeline of a simple app with a component in a "v-if". During this record, I've been showing/hiding the component multiple time. You probably know, but blue stacks are things that are still in memory, while grey bars are memory that was allocated BUT is now released image

Bellow, the same record by just loading the necessary PouchDB modules and adding them to Vue (doing nothing more): image

These records were made with chrome web tools. We can see a memory leak of 20kB every time I detach the component. Even though there is nothing relating to pouch in the component. Here it's only 20kB because the component is only containing text, but in my case, with a huge map, I'm leaking 70MB of memory each time, so I would say it is a pretty serious issue.

I created the most simple codesandbox to showcase the issue: https://codesandbox.io/s/vue-pouch-memory-leak-tcqm3 to test without pouch and without the issue, remove lines 3-6 and 12-17 in main.js

Regards, Loïc

MDSLKTR commented 4 years ago

Hey thanks for reporting this, we'll take a look asap

pintaf commented 4 years ago

Thanks. I would love to help, but I'm quite new to Vue. I hope you can find a solution :)