Memory Leak When Using Async Components

[mattlavallee]

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)
   

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
   
   

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:

vue/src/core/vdom/helpers/resolve-async-component.js

Lines 57 to 68 in 52719cc

	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]

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

[mattlavallee]

PR submitted here: #8755

[mattlavallee]

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!