React-quill: Remove lodash dependency?

[nicohvi]

Hi there, love the library!

Recently I was analyzing the size of my webpack bundle for one of my projects, and I noticed lodash contained within one of them. Upon further inspection I saw that this project has lodash as a dependency (which seems to load the entire library (or a big part of it), even when minifying) - so I created a fork which uses a custom build of ramda instead with feature parity.

The highlights are as follows:

Removing lodash reduces build size from 658 KB (264KB minified) to 544 KB (248KB minified).

The following functions have been replaced:

component.js

1. Some (lodash/some) has been replaced with Ramda.any (line 244)
2. isEqual (lodash/isEqual) has been replaced with Ramda.equals (line 236, 246, 305, 307, 392)

toolbar.js

1. isEqual (lodash/isEqual) has been replaced with Ramda.equals (line 148)
2. find (lodash/find) has been replaced with Ramda.find (line 173)

The lodash dependency has been replaced by a custom ramda build published
as the npm package (ramda-quill).

If you'd like to inspect the code, the repository is here: https://github.com/nicohvi/react-quill/tree/remove-lodash-dependency

Now I don't want to presume anything, neither do I know whether you want to depend on an external minified ramda build (if there's a better way to handle the replacement I'd love to hear it), but if you're interested I can make a PR 😄

Anyways, keep up the excellent work!

[alexkrolick]

Happy to reduce bundle size but why not use the lodash/fp packages instead?

https://github.com/lodash/lodash/wiki/FP-Guide

[nicohvi]

Hi alex!

I might be missing something, but I don't really see how the lodash/fp packages reduce bundle size. To me it looks like syntactical sugar for a more FP-friendly coding style?

There might be versions of lodash that will not add an additional 100KB (or webpack plugins for that matter) - but I'm not sure which that might be.

[alexkrolick]

The lodash/fp packages should be individually importable

If not we can add this to the build step: https://www.npmjs.com/package/babel-plugin-lodash

[nicohvi]

That sounds excellent, Alex!

I can take a look at it and create a PR if you'd like?

[alexkrolick]

That would be great, thank you

[nicohvi]

After researching this for a bit the size seems to be identical when I use (for instance) var find = require('lodash/fp/find') instead of var find = require('lodash/find').

As far as I can see babel isn't being used for the build steps now, so seems a bit strong to introduce this rather large tool for a (relatively) small reduction in file size.

Is introducing babel and rewriting the project to ES2016 something you think should be done?

[alexkrolick]

Is var find = require('lodash/find') the same as var _ = require('lodash') or does it reduce the bundle size a bit?

We've been meaning to rewrite some of the stuff with ES6 if it unlocks better long-term maintenance or compatibility. Also there are new React 16 methods (+ shims for 0.14/15) that we could potentially leverage in a rewrite (eg getDerivedStateFromProps, gerSnapshotBeforeUpdate, createRef).

We could also add Babel without rewriting anything, it's not that intrusive.

[nicohvi]

@alexkrolick Actually, we already use require('lodash/find') rather than require('lodash').

Replacing the former with the latter increases the size significantly, so much that I wonder whether we're already benefiting from the lodash cherry picking.

require('lodash/find') - as things are today:

With require('lodash'):

It might just be that the lodash library is inherently larger than a minified ramda-build.

[vinay72]

You can remove lodash dependency from your project by typing these command in your terminal npm uninstall lodash.

[zenoamaro]

With the recent revamp of the build system, and cutting on the amount of lodash code used, our distributable bundle is now ~250kb.

Please update to the latest v2 beta, you should find similar improvements! Please reopen if that's not the case, after making sure your bundler is set up for tree shaking.