Why do all lodash end in my webpack assembly?

Question

I checked all the libraries that included it, and all of them include functions through the full path, i.e. import find from 'lodash/find' .

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

Here is the json output of my webpack assembly:

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

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

Has anyone else experienced this? I feel that this has somehow declined.

UPDATE: I found that the package imports lodash functions using dot syntax: import find from 'lodash.find' . Perhaps this is so. What is the difference between point syntax and full path syntax?

Answer 1

Use babel-plugin-lodash to convert all imported lodash methods, such as import { map } from 'lodash'; , in direct links to import _map from 'lodash/map'; :

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

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

 plugins: [ new LodashModuleReplacementPlugin({ 'collections': true }) ]