F7 Webpack - VueComponents never garbage collected

[maxneuvians]

Hi

I am really enjoying f7-vue but I am running into a problem where loading a new page adds VueComponents to the memory heap without cleaning them up.

The issue in one of my applications is that after 80-100 navigation events the memory usage is out of control.

To reproduce this you can use do the following:

• Create a new app with https://github.com/framework7io/Framework7-Vue-Webpack-Template
• Take a heap snapshot when page loads (94 VueComponents in memory)
• Click on About link
• Take a heap snapshot (103 VueComponents in memory), these are the new loaded components
• Click on Back link
• Take a heap snapshot (103 VueComponents in memory) this is expected because no new components were created, although the new About ones could be released?
• Click on About link
• Take a heap snapshot (112 VueComponents in memory).

Should it not remain at 103 because those 9 components are already in memory? Or at least they should be freed and then replaced by the new ones?

I have tried a couple of configuration options like turning off domCaching on the view. When I add reload to the links I can see that the destroyed() event hook is called on the components but they do not get removed from memory.

Please let me know if I am misunderstanding an implementation detail here.

Thanks for all your hard work!

[maxneuvians]

It may not be specific to f7-router events. In my application I changed some components to trigger their existence based on v-if statements. When v-if switched back to false the destroyed() callback was invoked but the VueComponents were still in the memory heap. I made sure they did not have any external DOM listeners attached. I will try to reproduce this one in a simpler repo a well.

[scriptPilot]

Same for me. The problem is, if there is a div with an ID on it, you have it multiple times. I have had some issues out of that behavior.

What I tried to solve that situation - add the following configuration parameters at init:

• cache: false
• uniqueHistory: true

But same behavior ...

[scriptPilot]

Linked to https://github.com/framework7io/Framework7-Vue/issues/197 as well, where you can find a workaround for specific cases.

[maxneuvians]

These bugs affect the actual DOM items and they do get removed from the DOM - they don't get removed from the memory heap though.

[scriptPilot]

More related issues:

• https://github.com/framework7io/Framework7-Vue/issues/152
• https://github.com/framework7io/Framework7-Vue/issues/183

[vsg24]

Any updates on this?

[maxneuvians]

Hi,

I have created a sample repo:

https://github.com/maxneuvians/vueF7MemoryLeakExample

It illustrates the issue very nicely. You create a component using a v-if toggle which has a lot of data. In this case 100 item list. You toggle it on and off repeatedly. The destroyed callback is invoked, but the VueComponents are not cleared from memory.

After 18 toggles I went from 20 MB heap size to 145 MB heap size.

I tried this in plain F7Vue without webpack and it did not happen there - no VueComponents were created.

[macdonst]

@scriptPilot I sat with @maxneuvians today and saw the problem first hand.

[nolimits4web]

@maxneuvians so the problem is in webpack?

[nolimits4web]

I currently can’t check it as I’m on vacation, but if you use some custom list component or just plain <ul><li> instead of f7-list and f7-list-item, problem still exist?

[maxneuvians]

@nolimits4web I could not replicate it in https://github.com/nolimits4web/Framework7-Vue-Simple-Template with the exact same component set up. I replaced the f7-list with ul and f7-list-item with li and it did not cause a problem. However, if I do:

<div>
    <f7-button v-for="number in data" :text="number"></f7-button>
 </div>

It will still retain the components. So this is not specific to just <f7-list>

[macdonst]

@nolimits4web using @maxneuvians example I can reproduce the issue with all of our phonegap-template-vue-f7-* templates that use webpack.

[nolimits4web]

Well ok, so how to unload component from browser memory? As far as I know browsers don’t really allow to control memory. Maybe problem related to Vue, such v-if thing is controlled by Vue, F7 doesn’t do anything with it. Events attaching/detaching is also controlled by Vue

[maxneuvians]

Without in-depth knowledge I would say that memory gets freed through the garbage collector. The memory is freed when it is no longer linked to its root.

This issue https://github.com/vuejs/vue/issues/6759 implies that the count of VueComponents should decrease after the component is destroyed. This seems to be specific to keep-alive though.

[nolimits4web]

Ok, the issue is in the Vue itself, here is a simple test case https://jsfiddle.net/muy6kfn2/3/

• Take memory snapshot
• Check checkbox (to render 1000 components)
• Uncheck checkbox
• Take memory snapshot - components is in the memory

[nolimits4web]

And looks like it is fixed in latest version https://jsfiddle.net/0qb0kfmr/3/

[nolimits4web]

From my findings the issue is caused by not detached event in case of component rendered with render function and have event assigned inside with on

[nolimits4web]

So closing as not F7 issue

[maxneuvians]

@nolimits4web Thank you for your work on the issue! Much appreciated!

[macdonst]

Thanks @nolimits4web