Why OverlayScrollbars.js is so heavy? (53kb minified)

[maximelebreton]

Hello @KingSora, and thanks for your work!
I run a size-limit --why, because I found that my bundle size was heavy,

As you could see, OverlayScrollbars is one of the two heaviest libraries in my bundle, next to vuejs..!
vue.js : 278kb normal, 102kb minified
OverlayScrollbars.js : 294kb normal, 53kb minified

Any plans to reduce that size?

Thanks,

[KingSora]

Good day!

The short answer is: yes, I am planing to reduce the size. - But I think this answer isn't very satisfying.

I know, its a little bit hard to justify the size of a scrollbar plugin to the size of a whole framework like vue.js, but there are several reasons why the plugin is so big:

• Browser support:
  As you can read in the documentation, the plugin supports everything above IE8. As you may know IE8 isn't the browser which is popular due to its features. Thats why I had to figure out many workarounds and fallbacks for several problems.

• Browser differences:
  I think this is something every JavaScript developer can comprehend to. All major browsers are implementing things differently and have different behaviors and vendor-prefixes. Especially rtl (right-to-left) scrolling is something ALL browsers have completely different behaviors. I am quite sure my plugin is the only plugin which is handling rtl scrolling in the correct way accross all browsers.

• DOM handling:
  As you might have noticed, the plugin has to maintain several generated DOM-Elements. This code is simply very large, since you have to create the DOM in the correct order, maintain it with CSS which has long propertynames and so on. - But I think in this area is room for improvement.

• Feature set:
  I was very careful with my decision which features shall be supported and which not. There are features which consumes without a doubt much code, but I think the best way to go is the middle way between "high feature set" and "large code size". For example the feature to support textarea elements is something which consumes plenty of code.

• Bugs
  During the development of the plugin (which was about a year until I've published v1.0.0 here on github) I've found quite a lot bugs accross all browsers. These must be detected before they can be fixed. And since I want to provice a high quality product, I've "fixed" every single one of them, but the price is much code for the detection and the corresponding fix of these bugs. Here is a example of a bug which only exists in Firefox: Click - As you can see this bug was reported 13 years ago, but is still present. The most recent Bug hasn't been confirmed after almost a month.

Now after you have some insights about all these things, I can give you some solutions I came up with:

1. Drop the browser support to a certain degree (or let the user decide which browser support he wants)
2. Let the user decide which features shall be supported and offer a version which supports only individual feature set for the user

None of these are currently in development or something, but I can't think of other good solutions. Maybe you have a idea? - You can take a look at my code if you want, I think I've done everything possible to hold it as small as possible. (except the DOM handling there is, as I mentioned, room for improvement, but this won't reduce the sice significantly).

I hope this answer gave you a better understanding why the plugin has the size which it has.

[maximelebreton]

Hi Rene,
and thank you for this detailled answer!

I knew it was a big deal, and I didn't underestimate the reasons, but I understand better know.

Keep the good work!

[KingSora]

Good day!

I've good news:
In the newest release v1.4.2 I've reduced the size about 3-4kb in the minified versions. Just wanted to let you know.

I know its not much, but I'll improve it further over time.