CODEWITHSUNDEEP
javascriptreactjswebpackredux
faceyspacey.com
faceyspacey.com

Reputation: 2630

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?

Upvotes: 8

Views: 2083

Answers (1)

Ori Drori
Ori Drori

Reputation: 191976

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: [
     new LodashModuleReplacementPlugin({ 'collections': true })
]

Upvotes: 1

Related Questions