faceyspacey.com faceyspacey.com - 1 month ago 8
React JSX Question

Why is all of lodash ending up in my webpack build?

I've checked all the libraries that included it and they all include functions via their full path, i.e:

import find from 'lodash/find'
.

Redux is the main dependency that uses it and I checked their code too, and it correctly imports each function by its full path.

Here is the json output of my webpack build visualized:

https://www.dropbox.com/s/njjjtgtw19d52j6/Screenshot%202016-10-30%2006.27.44.png?dl=0

As you can see, lodash is taking up a huge percentage, while only a few of its methods are used. Using
webpack-bundle-size-analyzer
lodash comes out to 135kb (pre minified and gzipped of course), but it still a lot larger than it should be.

Has anyone else experienced this? I feel like it's somehow redux.

UPDATE: I found a package imports lodash functions using dot syntax:
import find from 'lodash.find'
. Perhaps that does it. What's the difference between the dot syntax and the full path syntax?

Answer

Use babel-plugin-lodash to convert all imports of lodash methods like import { map } from 'lodash'; to direct references to import _map from 'lodash/map';:

{
  "plugins": ["lodash"],
  "presets": ["es2015"]
}

Combine it with lodash-webpack-plugin to include just the features you need:

'plugins': [
    'collections': true
]
Comments