Memory leaks

[TunaYagci]

This component is leaking and it's heavily affecting us in production. I can provide a jsFiddle if you need it.

[kenberkeley]

hope to see your jsfiddle demo

[TunaYagci]

@kenberkeley fiddle here: https://jsfiddle.net/TunaYagci/eywraw8t/272323/

My usual memleak routine:
(You'll need Chrome debugger)

1. Click /home
2. Snapshot
3. Click /foo
4. Click /home
5. Snapshot
6. Compare these snapshosts

Normally, when you route back you should see the VueComponent delta must be 0 (test it with route /boo, you'll see the difference=0)

Difference after /home -> /foo -> /home (~13 components are not deleted)

Do that /home -> /foo -> /home for x20 times (~200 components are not deleted)
As you can see even snapshot size is increased as 3mb (this is huge in production because when it leaks, it leaks with whole component tree with it):

Reason why I'm testing this with vue-router is that leaks are simple and visible here. Unless you called keep-alive these components should've been deleted.

[mhascak]

Hi, any progress ?

[kenberkeley]

no idea😂

[mhascak]

I fixed some memory leaks, they were caused moustly by unregistered jQuery events.
mhascak@76129de

[TunaYagci]

@Klainer can you share a release so I can test it on jsFiddle?
Never mind I've just seen your commit had it.

[TunaYagci]

@Klainer that commit really did something. Here are the results:
Before:

After:

So if you look at VueComponent, this commit really cleaned up the leaks. 🎉 🎉

But, I don't know why Vue constructors are still here. There seems to be another leak somewhere, but I'm not sure. This usually happens when you call new Vue() (usually for an eventBus) and didn't stop listening it on beforeDestroyed. You have to call eventBus.$off, like this:

created(){
    this.eventBus.$on('content-type-saving', this.listener)
  },
  beforeDestroy(){
    this.eventBus.$off('content-type-saving', this.listener)
  }

Nice work, really 👍 Just wondering, how did you catch those leaks?