React-color: Total JS size is huge

[japgolly]

Hi! This project looks absolutely beautiful but I just imported GithubPicker and ChromePicker into my project and my prod-mode output after bundling increased by 143,413 bytes which is huge.

Is this something that will be addressed in #575 ?

[japgolly]

Here's a bit more detail about where the size is coming from:

react-color                 160.77 KB
lodash                      139.92 KB
tinycolor2                   35.84 KB
reactcss                     12.82 KB
material-colors               5.48 KB
@icons/material               3.18 KB
prop-types                    2.67 KB

[japgolly]

^^ sizes are unminified btw

[ricokahler]

I second this. By doing a quick check on bundlephobia, it seems like this package isn't bundled using ES modules.

Source

You can actually get some very big bundle size wins by:

• supporting tree shaking via an ES6 modules build/bundle. you can do this by creating an ESM bundle and adding the module property to the published package.json. (reference)
• bundling with rollup. rollup creates bundles with nice output and supports ESM bundles
• only importing the colors your need from material-colors
• removing lodash
• removing tinycolor2 for an internal version (maybe using a canvas implementation)

None of these have to breaking changes btw. These could be addressed in a minor before 3.x.

Let me know if you're accepting PRs, this is a great lib and I'd happy to contribute!

[oscarmorrison]

+1

[ricokahler]

@casesandberg @atfzl I would suggest re-opening this (I think it auto closed when the PR merged). Still a bit to go but HUGE improvement 🎉