vue2-datatable icon indicating copy to clipboard operation
vue2-datatable copied to clipboard

Memory leaks

Open TunaYagci opened this issue 6 years ago β€’ 7 comments

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

TunaYagci avatar Aug 13 '18 12:08 TunaYagci

hope to see your jsfiddle demo

kenberkeley avatar Aug 13 '18 13:08 kenberkeley

@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) screen shot 2018-08-15 at 18 22 01

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): screen shot 2018-08-15 at 18 23 17

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.

TunaYagci avatar Aug 15 '18 15:08 TunaYagci

Hi, any progress ?

mhascak avatar Sep 11 '18 07:09 mhascak

no ideaπŸ˜‚

kenberkeley avatar Sep 11 '18 08:09 kenberkeley

I fixed some memory leaks, they were caused moustly by unregistered jQuery events. https://github.com/Klainer/vue2-datatable/commit/76129dee74e92bc667fddb4d8324dd6bf7215940

mhascak avatar Sep 21 '18 11:09 mhascak

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

TunaYagci avatar Oct 03 '18 07:10 TunaYagci

@Klainer that commit really did something. Here are the results:
Before:
screen shot 2018-10-03 at 11 36 02

After:
screen shot 2018-10-03 at 11 35 55

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

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?

TunaYagci avatar Oct 03 '18 08:10 TunaYagci