React-toolbox: Get rid of ramda dependency. Huge bundle size.

[landabaso]

I like the way we can minimize the bundle size by importing components from react-toolbox such as:

import Input from 'react-toolbox/lib/input/Input';
import Slider from 'react-toolbox/lib/slider/Slider';

React-Toolbox has been designed so you should end up having a small webpack bundle for the browser if you only use a few modules.

However I was worried about doubling my bundle size after including React-Toolbox.

After analyzing the final bundle file I found out that ramda is taking 289KB (~~after~ before being minified). That's huge. In fact, ramda uses almost 50% of my bundle.

There are only a couple of places were ramda is used within React-Toolbox:
Ripple.js -> import { dissoc } from 'ramda';'
and
utils.js -> import { assoc, compose, keys, reduce, pickBy } from 'ramda';

I'm not sure how difficult could it be to get rid of these dependencies but the benefits would be great. Ramda takes more space than react, for example.

EDIT:
You can import from ramda like this to save some bits:
var map = require('ramda/src/map')
(see https://github.com/ramda/ramda/issues/1980)

I tried to import following that pattern on Ripple.js and utils.js but I only saved 35K of the 289KB bundle increase. I guess that internally the ramda methods share a lot of code...

EDIT 2:
I just noticed that using webpack --json did not minify the code (even when compiling in production mode). So 289KB are in fact 41KB (which I believe is still quite a lot - thus not that bad)

[javivelasco]

Wow that's something to check out. It's easy to remove so I'll investigate if we can reduce the size by importing only needed code. Otherwise we'll just replace those functions with a custom implementation, it's no big deal

[katzoo]

babel-plugin-ramda should fix the import issue, but I would also go for custom implementation / webpack alias.

[landabaso]

I just noticed that using webpack --json did not minify the code (even when compiling in production mode). So 289KB are in fact 41KB (which I believe is still quite a lot - but not that bad).

[landabaso]

I further analysed the issue.

Using the ramdla plugin in my build process did not help (I guess it should go in the react-toolbox build process).

But importing by var XXX = require('ramda/src/XXX') saves 35K (minified) of the 41KB increase (minified) because of Ramda. Note that initially I wrongly thought it was saving 35K of 289K.

So, in fact, ramda would only take 6KB (minified) if importing using var XXX = require('ramda/src/XXX').

Sorry for the confusion.

Still, I guess that it would be better to require from ramda using ramda/src to save those 35KB.

I'll create a pull request if that's ok.