Vue: Memory Leak When Using Async Components

Created on 31 Aug 2018  ·  3Comments  ·  Source: vuejs/vue

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: https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/helpers/resolve-async-component.js#L57-L68

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

bug has PR

Most helpful comment

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

All 3 comments

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

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!

Was this page helpful?
0 / 5 - 0 ratings