The Wayback Machine - https://web.archive.org/web/20220430154216/https://github.com/vuejs/vue-router/issues/1279
Skip to content
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

Closed
jazoom opened this issue Mar 25, 2017 · 14 comments
Closed

Memory leak when switching routes #1279

jazoom opened this issue Mar 25, 2017 · 14 comments
Labels

Comments

@jazoom
Copy link

@jazoom jazoom commented Mar 25, 2017

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.

@hworld
Copy link

@hworld hworld commented Mar 25, 2017

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/
The example just uses latest vue and vue-router.

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!

@posva posva added the bug label Mar 25, 2017
@posva
Copy link

@posva posva commented Mar 25, 2017

Thanks, that really helped 🙂

@jazoom
Copy link
Author

@jazoom jazoom commented Mar 25, 2017

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.

@yyx990803
Copy link

@yyx990803 yyx990803 commented Mar 27, 2017

fixed in Vue core vuejs/vue@3209f6f

@yyx990803 yyx990803 closed this Mar 27, 2017
@badpunman
Copy link

@badpunman badpunman commented Apr 5, 2017

I'm not sure this is fixed properly yet. I'm using 2.2.6 and am experiencing big leaks again.

image

Again, there's some retained html elements that are not present in DOM, that are referenced through _refElm. I'll have to do some experimenting.

@yyx990803
Copy link

@yyx990803 yyx990803 commented Apr 6, 2017

@badpunman I can no longer reproduce leaks in @jazoom or @hworld 's code using 2.2.6 - please provide a separate repro if possible.

@badpunman
Copy link

@badpunman badpunman commented Apr 6, 2017

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.

@wolanx
Copy link

@wolanx wolanx commented Apr 18, 2017

内存好了,但是cpu爆表
vue2.2.6 + vur-router2.4
feec6d34-5a03-476a-b0b5-481591c65d74
主要出现在Page A => Page B => Page A

help~~~~~

@ralphchristianeclipse
Copy link

@ralphchristianeclipse ralphchristianeclipse commented Apr 18, 2017

Same here vue-router creates a not noticable increasing ram with small data but with big data it will surely show off

@jigneshparmar126
Copy link

@jigneshparmar126 jigneshparmar126 commented Oct 6, 2017

Vue js Switch Customise copy this code and use it as per your need

https://github.com/jigneshparmar126/switch-button/blob/master/README.md

@waratah
Copy link

@waratah waratah commented Oct 30, 2017

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.

@AlastairGrowcott
Copy link

@AlastairGrowcott AlastairGrowcott commented Feb 6, 2020

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.

@AlastairGrowcott
Copy link

@AlastairGrowcott AlastairGrowcott commented Feb 6, 2020

As commented above, the leak is small, but with bigger data will surely grow.
It's been over a year. Any chance of a fix?

@superchangme
Copy link

@superchangme superchangme commented Sep 17, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

Morty Proxy This is a proxified and sanitized view of the page, visit original site.