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.
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:
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.
The culprit appeared to be lodash:
In my own code, I was only using small slivers of lodash, based on the recommendation from the examples at lodash.com:
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 ofrequire('lodash/assign')
. When I made that change in my own react-engine branch, here was the resulting build:This one-line change results in a huge reduction in bundle size! 500KB before minification, and 66KB after.