Bundle size discussion

[chrisblossom]

Currently react-redux-form has quite a large bundle size.

Using a Webpack production setup, ran the results though gzip-size, pretty-bytes, and webpack-bundle-size-analyzer get the following results. (granted I could be doing something drastically wrong)

Before react-redux-form:
Info: main-a7e6efc158923f542641.js 236.19 kB (~65.99 kB gzipped)
lodash: 2.8 KB (0.326%)

After react-redux-form
Info: main-2baf2fc84daf142ae6da.js 291.89 kB (~82.07 kB gzipped)

~16.08 kB gzipped added.

According to my tests below, lodash is currently accounting for ~8.46 kB, a little more than half.

I think we should start removing as much of lodash as we can.

Below are my results sorted in lodash function size.

initial:
Info: Client Assets:
Info:   main.js 528 B (~325 B gzipped)

import _ lodash:
Info:   main.js 62.72 kB (~22.13 kB gzipped)

import mapValues from 'lodash/mapValues';
import partial from 'lodash/partial';
import isEqual from 'lodash/isEqual';
import endsWith from 'lodash/endsWith';
import capitalize from 'lodash/capitalize';
import _get from 'lodash/get';
import toPath from 'lodash/toPath';
import isPlainObject from 'lodash/isPlainObject';
import isBoolean from 'lodash/isBoolean';
import identity from 'lodash/identity';
Info:   main.js 26.8 kB (~8.46 kB gzipped)
lodash: 120.32 KB (97.4%)

import mapValues from 'lodash/mapValues';
Info:   main.js 16.09 kB (~4.92 kB gzipped)
lodash: 68.35 KB (97.5%)

import partial from 'lodash/partial';
Info:   main.js 10.61 kB (~3.94 kB gzipped)
lodash: 50.61 KB (96.1%)

import isEqual from 'lodash/isEqual';
Info:   main.js 12.05 kB (~3.77 kB gzipped)
lodash: 49.29 KB (97.5%)

import endsWith from 'lodash/endsWith';
Info:   main.js 2.89 kB (~1.22 kB gzipped)
lodash: 10.05 KB (90.1%)

import capitalize from 'lodash/capitalize';
Info:   main.js 2.73 kB (~1.17 kB gzipped)
lodash: 7.94 KB (85.2%)

import _get from 'lodash/get';
Info:   main.js 2.63 kB (~1.13 kB gzipped)
lodash: 8.03 KB (77.8%)

import toPath from 'lodash/toPath';
Info:   main.js 2.26 kB (~1 kB gzipped)
lodash: 6.72 KB (73.9%)

import isPlainObject from 'lodash/isPlainObject';
Info:   main.js 1.22 kB (~589 B gzipped)
lodash: 2.8 KB (57.6%)

import isBoolean from 'lodash/isBoolean';
Info:   main.js 890 B (~454 B gzipped)
lodash: 1.46 KB (43.5%)

import identity from 'lodash/identity';
Info:   main.js 743 B (~391 B gzipped)
lodash: 349 B (21.1%)

Thoughts? Are others seeing this kind of bundle increase?

[davidkpiano]

I'll start seeing how we can refactor from top-down. For compatibility and not-reinventing-the-wheel reasons, I'd like to probably keep these:

• isEqual (unless we find a smaller implementation)
• get (for its path support)
• toPath

We can probably find a simpler implementation of mapValues since it's only used internally, and not in the public API.

I'll take a look at what else (besides lodash) can be contributing to the size that we can probably shrink down.

Thanks for taking a look at this!

[chrisblossom]

I added a simple remake of mapValues that follows the current usage of it.

https://github.com/chrisblossom/react-redux-form/tree/feature/bundle_size

[chrisblossom]

Other lodash modules must share the same functions that are being used with mapValues.

Before:
Info:   main.js 291.89 kB (~82.07 kB gzipped)
lodash: 127.35 KB (12.1%)
react-redux-form: 35.47 KB (3.38%)

mapValues feature/bundle_size
Info:   main.js 291.25 kB (~81.65 kB gzipped)
lodash: 124.01 KB (11.8%)
react-redux-form: 35.59 KB (3.40%)

[kmudrick]

I've used https://github.com/substack/node-deep-equal instead of lodash's isEqual and it is fairly small (but not sure if it is smaller than the lodash implementation)

[acidicX]

Webpack v2 will include tree shaking and only bundle the lodash functions you really used :-)
https://medium.com/modus-create-front-end-development/webpack-2-tree-shaking-configuration-9f1de90f3233

[davidkpiano]

@acidicX Yes, that'll be really helpful, though I anticipate many developers will still be using Webpack 1.

I am actively working on reducing the bundle size in V1, and you can check out the current work in the v1 branch.