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 Using Async Components #8740

Closed
mattlavallee opened this issue Aug 31, 2018 · 3 comments
Closed

Memory Leak When Using Async Components #8740

mattlavallee opened this issue Aug 31, 2018 · 3 comments

Comments

@mattlavallee
Copy link
Contributor

@mattlavallee mattlavallee commented Aug 31, 2018

Version

2.5.17

Reproduction link

https://codesandbox.io/s/4k43rylw0

Steps to reproduce

  1. Load the reproducer and take a memory heap snapshot. Searching the heap you will find 4 VueComponents (App, Container, Child, Async Child)
    image

  2. Click the Destroy button. This toggles a v-if which will remove Child component and thus AsyncChild component as well.

  3. At this point, the page is updated as expected

  4. Take another memory heap snapshot. Search the heap again for "VueComponent" and you will see that 4 VueComponents still exist
    image
    image

What is expected?

After destroying Child component, the component and it's asynchronously loaded child component should be destroyed and the memory freed up.

What is actually happening?

Vue is holding on to a context reference which is preventing these components from being garbage collected


This is happening due to the resolve-async-component logic located here:

if (isDef(factory.contexts)) {
// already pending
factory.contexts.push(context)
} else {
const contexts = factory.contexts = [context]
let sync = true
const forceRender = () => {
for (let i = 0, l = contexts.length; i < l; i++) {
contexts[i].$forceUpdate()
}
}

In the forceRender function on line 64, after calling $forceUpdate, the contexts array should be cleared to free up those references so that the components will be able to be garbage collected at a later point in time

@mattlavallee
Copy link
Contributor Author

@mattlavallee mattlavallee commented Aug 31, 2018

I can submit a PR for the fix for this issue as well, thanks

@mattlavallee
Copy link
Contributor Author

@mattlavallee mattlavallee commented Sep 4, 2018

PR submitted here: #8755

@mattlavallee
Copy link
Contributor Author

@mattlavallee mattlavallee commented Sep 21, 2018

Hi @LinusBorg

I see you added some labels to this issue. Is there anything else that I need to do to kick off the review process of the referenced pull request?

Thanks!

@yyx990803 yyx990803 closed this in 2e472c5 Nov 30, 2018
f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019
…mpletes (fix vuejs#8740) (vuejs#8755)

* fix(component): clean up memory leak after loading async component completes

* fix(async component): accounting for async components with loading property

* refactor(component): simplifying memory cleanup logic
erdong-fe pushed a commit to erdong-fe/vue that referenced this issue May 2, 2020
…mpletes (fix vuejs#8740) (vuejs#8755)

* fix(component): clean up memory leak after loading async component completes

* fix(async component): accounting for async components with loading property

* refactor(component): simplifying memory cleanup logic
aJean added a commit to aJean/vue that referenced this issue Aug 19, 2020
…mpletes (fix vuejs#8740) (vuejs#8755)

* fix(component): clean up memory leak after loading async component completes

* fix(async component): accounting for async components with loading property

* refactor(component): simplifying memory cleanup logic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants