search

stbaer / rangeslider-js

Lightweight rangeslider with touch support
http://stbaer.github.io/rangeslider-js/
MIT License
45 stars 12 forks source link

Big filesize #1

Closed jenstornell closed 8 years ago

jenstornell commented 8 years ago

The original rangeslider.js with jQuery is about half the filesize. I try to minimize my javascript filesize by using "plugins" that don't require jQuery. Often the vanilla js plugin is about the same size or smaller. Not in this case.

Is it possible to keep the same function but make it smaller?

stbaer commented 8 years ago

Ya, trying to reduce the total size is definitely something I want to do. Will probably get rid of the dom-events dependency in the future and look into other ways to reduce the size.

If you have a project that shares some of the other dependencies, like lodash/debounce for example and use browserify or some other bundler a good part of the total size can be factored out.

jenstornell commented 8 years ago

Maybe you could drop like IE8 support if you have things like that?

Maybe this could be of help for inspiration? https://css-tricks.com/custom-interactive-range-inputs/

Now I only use no dependence JS plugins. I have maybe 6 plugins and this takes about 50% of the total minified size.

Sidenote I have replaced old rangeslider on my localhost with yours. Here is what it looks like (still old rangeslider here on live, but it looks the same with yours) http://xn--lnera-mra.se/

stbaer commented 8 years ago

Will take a look into this soon. But closing it now because I don't consider it a bug.

Btw, pull requests are also welcome :)

stbaer commented 8 years ago

@jenstornell - I made some changes in the dev branch, the minified .js is below 10 kb.

jenstornell commented 8 years ago

I just tested it and so far it just works out of the box. You just cut half the code?

stbaer commented 8 years ago

No, there was nothing cut. I replaced the lodash/debounce dependency with component/debounce which is a bit more lightweight. Also kicked out the dom-events dependency and replaced it with only necessary code. Additionally small code changes.

Not sure yet about the debounce change though. Lodash is more common, and when used in a larger project with browserify/require where lodash is already in use it doesn't add anything to the total size.