New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Memory leak when switching routes #1279
Comments
This actually seems to be a really serious issue. My pages are really complex and after just 15 clicks to other pages the memory usage goes up to 1gb. It must be happening to nearly all pages. I made a much simpler repro case by just copying the getting started from vue-router into a jsfiddle. I've not really changed anything except to just put links within the component templates. This ensures there's some click handlers attached and what not. Repro case: https://jsfiddle.net/b6exw85n/1/ Just do the allocation timeline. Keep on clicking the link within the views. You'll see that blue bars are retained every time you switch away from the route. Clicking into it you'll notice it's the link elements. I wish I knew enough about vue and vue-router internals to dig into it, but I'm not sure why they're retaining. =\ Really hope this helps to dig into it! |
Thanks, that really helped 🙂 |
Nice work @hworld. You really boiled that down to its simplest possible form. It makes me wonder why this hasn't plagued every app for a while and been found by now. I only found it when I changed to server-side rendering and my servers kept quickly running out of memory. |
fixed in Vue core vuejs/vue@3209f6f |
@badpunman I can no longer reproduce leaks in @jazoom or @hworld 's code using 2.2.6 - please provide a separate repro if possible. |
Sorry for the false alarm here. We had a bug of our own where someone put a reference to component to vuex store so it wouldn't clean up from memory. Duh. |
Same here vue-router creates a not noticable increasing ram with small data but with big data it will surely show off |
Vue js Switch Customise copy this code and use it as per your need https://github.com/jigneshparmar126/switch-button/blob/master/README.md |
Note only: Please also note that if you have a v-for and the key is NULL for a couple of values you may end up with an issue. |
Reproduced with @hworld's example. The example is using what I can only assume to be links to the latest vue and vue-router javascript. |
As commented above, the leak is small, but with bigger data will surely grow. |
i use element-ui and its tree component also has the memory leak problem.The VNodes has deep chain about $parent and $childrent. i only know when i use v-if and not switch route,memory can gc,but use route switch it cause memory leak.Who can help me,i am in suck for two years...ElemeFE/element#14858 |
As mentioned in #1111 I believe there is another memory leak. I do not know the exact cause but I have been able to create a very simple app to reproduce it.
Vue.js / vue-router versions
Any recent version
Reproduction Link
https://github.com/jazoom/vue-memory-leak
Steps to reproduce
$ yarn
$ npm run dev
Open Chrome devtools to "Profile" tab
Select "Record Allocation Timeline"
Press "Start" button
In app: Click the link to go to "About" page then back to "Home" page -> repeat multiple times
What is Expected?
The garbage collector should be able to collect the
number
elements.What is actually happening?
It appears there is a memory leak.
The text was updated successfully, but these errors were encountered: