Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 220
faceyspacey.com Avatar asked Oct 30 '16 13:10

faceyspacey.com


1 Answers

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 })
]
like image 163
Ori Drori Avatar answered Sep 30 '22 17:09

Ori Drori