replace full lodash inlined into client with lodash/assign

[zetlen]

This replaces the full build of lodash in the client library with only the assign method that the library requires. It reduces bundle size considerably.

I'm using the react-engine client library in a project, and I found that Webpack was producing very large builds, even though in my own code I had very few dependencies.

$ npm run bundle

> webpack --progress

    [0] Hash: f4f57f9976d22f813902648367b12ea11c157c7b
    Version: webpack 2.1.0-beta.20
    Hash: f4f57f9976d22f813902
    Version: webpack 2.1.0-beta.20
    Time: 8441ms
           Asset     Size  Chunks             Chunk Names
    js/bundle.js   322 kB       0  [emitted]  js/bundle.js
    css/main.css  81.4 kB       0  [emitted]  js/bundle.js
     [167] ./public/views .*\.jsx 193 bytes {0} [built]
        + 388 hidden modules
    Child extract-text-webpack-plugin:
            + 4 hidden modules

The culprit appeared to be lodash:

$ npm run analyze

> webpack --profile --json | webpack-bundle-size-analyzer

lodash: 615.66 KB (38.2%)
react: 615.51 KB (38.2%)
react-router: 101.96 KB (6.33%)
vxpattern-lib-paypal: 80.98 KB (5.03%)
history: 59.55 KB (3.70%)
  deep-equal: 3.8 KB (6.39%)
  warning: 1.76 KB (2.96%)
  <self>: 53.98 KB (90.7%)
fbjs: 32.19 KB (2.00%)
superagent: 29.14 KB (1.81%)
fuse.js: 22.35 KB (1.39%)
style-loader: 6.99 KB (0.434%)
react-engine: 4.88 KB (0.303%)
process: 4.4 KB (0.274%)
component-emitter: 3.11 KB (0.193%)
object-assign: 1.95 KB (0.121%)
warning: 1.76 KB (0.110%)
invariant: 1.48 KB (0.0920%)
css-loader: 1.47 KB (0.0914%)
query-string: 1.45 KB (0.0898%)
hoist-non-react-statics: 1.35 KB (0.0841%)
webpack: 1.03 KB (0.0639%)
strict-uri-encode: 182 B (0.0110%)
react-dom: 63 B (0.00382%)
<self>: 22.28 KB (1.38%)
<self>: 4.23 KB (100%)

In my own code, I was only using small slivers of lodash, based on the recommendation from the examples at lodash.com:

import reduce from 'lodash/reduce';
import map from 'lodash/map';

But the analyzer said it was coming from the whole library. After some research, I discovered that the client library uses lodash.assign by calling require('lodash').assign instead of require('lodash/assign'). When I made that change in my own react-engine branch, here was the resulting build:

 Hash: 74333e150c3ea67534e2
    Version: webpack 2.1.0-beta.20
    Time: 6437ms
           Asset     Size  Chunks             Chunk Names
    js/bundle.js   256 kB       0  [emitted]  js/bundle.js
    css/main.css  81.4 kB       0  [emitted]  js/bundle.js
     [169] ./public/views .*\.jsx 193 bytes {0} [built]
        + 391 hidden modules
    Child extract-text-webpack-plugin:
            + 4 hidden modules

react: 615.51 KB (55.8%)
lodash: 109.38 KB (9.91%)
react-router: 101.96 KB (9.24%)
vxpattern-lib-paypal: 80.98 KB (7.34%)
history: 59.55 KB (5.40%)
  deep-equal: 3.8 KB (6.39%)
  warning: 1.76 KB (2.96%)
  <self>: 53.98 KB (90.7%)
fbjs: 32.19 KB (2.92%)
superagent: 29.14 KB (2.64%)
fuse.js: 22.35 KB (2.03%)
style-loader: 6.99 KB (0.633%)
react-engine: 4.88 KB (0.442%)
process: 4.4 KB (0.399%)
component-emitter: 3.11 KB (0.282%)
object-assign: 1.95 KB (0.176%)
warning: 1.76 KB (0.160%)
invariant: 1.48 KB (0.134%)
css-loader: 1.47 KB (0.133%)
query-string: 1.45 KB (0.131%)
hoist-non-react-statics: 1.35 KB (0.123%)
webpack: 1.03 KB (0.0933%)
strict-uri-encode: 182 B (0.0161%)
react-dom: 63 B (0.00558%)
<self>: 22.28 KB (2.02%)
<self>: 4.23 KB (100%)

This one-line change results in a huge reduction in bundle size! 500KB before minification, and 66KB after.

[samsel]

thanks @zetlen

[samsel]

4.1.0 has this change now!