Memory Leak changing routes

[tochoromero]

Version

2.5.8

Reproduction link

https://jsfiddle.net/tochoromero/1tup51he/2/

Steps to reproduce

I have been fighting memory leaks for the last week. We have a big project that has many pages and some complex nested navigation, we use Vuex and have tons of mixins, so it is fair to say the app is complex.

We started noticing how performance would degrade with usage. So I made sure I wasn't doing anything stupid like storing a reference to this on a Vuex Store, or not disposing of listeners. After that, I started a long week of hunting down the memory leak.

It was a very long process, but I wasn't finding anything solid to report. Then I found that one specific plugin I was using was causing a leak. The plugin is https://github.com/AStaroverov/v-media-query, but since I wasn't able to reproduce it on a clean project I just stopped using it. Unfortunately, that plugin only accounted for a very small percentage of the leaks. So my hunt continued.

Then I found that having a Modal, from https://bootstrap-vue.js.org/, on my Top Level App component would cause a leak, if I moved the modal out of the App component and into the routes then I was fine, again I wasn't able to reproduce it on a clean project, so at that point I was so tired that I just removed the modal and called it a week.

This fixed the leaks and everything was fine until a new leak appeared. Fortunately, I was able to use Git to pinpoint the commit that caused the leak. The leak happens when I use a v-dropdown from again bootstrap-vue. But I looked at their source code and everything seems fine on their side, that is why I decided to open the issue here instead.
And thankfully this time I was able to create a minimalistic reproduction example.
https://jsfiddle.net/tochoromero/1tup51he/2/

You can use the link to go back and forth between the two pages. Check the Memory Usage, the instances of VueComponent are never garbage collected.

Using the Chrome Dev Tools, we can see how after navigating to the new route, 6 VueComponents were created and none removed:

Then when we navigate back to the first page and compare the snapshots we see have 12 VueComponents created and none deleted

And finally, after clicking the links a lot we can see 378 VueComponents created and none deleted, and we can also see how the memory usage is creeping up.

I hope you guys have an idea of what is going on because tracking down those memory leaks is very time consuming.

What is expected?

The VueComponent instances of the previous page should be garbage collected

What is actually happening?

The unused VueComponent instances are kept in memory

[posva]

Please, remove any third library to showcase a leak (no bootstrap, no babel)

[yyx990803]

Have you opened an issue at bootstrap-vue first? That seems like a better place to start the investigation because the core team is unlikely to be familiar with that their component is doing, and they have a better chance of coming up with an isolated repro.

[tochoromero]

Sure thing, I will open one on their side and reference this one.

[tochoromero]

The issue was fixed in the bootstrap-vue side. Thank you guys.