Is this needed with Webpack 2 stable?

[andresgutgon]

What?

Hi, first of all thank you for all your hard work. Is amazing all the effort you're putting on make lodash modular and produce smaller bundles.

I'm trying to understand Webpack 2 tree shaking. First my versions:

    "webpack": "2.2.1",
    "lodash": "^4.17.4",

With those options I'm trying this code:

// picking map
import _map from 'lodash/map';
const mapAdd = _map([1, 2, 3], (item) => item + 1);
console.log('result', mapAdd);

// All lodash universe
import _ from 'lodash';
const mapAdd = _.map([1, 2, 3], (item) => item + 1);
console.log('result', mapAdd);

Results

Look at yellow line. Vendor bundle

Picking map

All lodash universe

It's pretty cool. Looks like some tree shaking is happening in my webpack 😄

The thing is that I tried babel-plugin-lodash putting this on my .babelrc:

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    "lodash",
    "...more"
  ]
}

But the results are the same. Is that normal?

Is important to highlight that ["es2015", { "modules": false }] is fundamental to make tree shaking work on Webpack 2. Right?

[jdalton]

You may still be accidentally using the plugin.
It looks like it's still needed to get the benefits of cherry-picking if you're using syntax like:

import { get } from 'lodash-es'

[ConAntonakos]

To be clear with tree shaking, can you perform the following syntax?:

import {
  flatten,
  get,
  merge,
  orderBy,
  reduce,
} from 'lodash';

Do you need the babel-plugin-lodash, and do you need lodash-es? Thanks!

[jdalton]

You'll still need babel-plugin-lodash for lodash or lodash-es.

[ConAntonakos]

Thanks, @jdalton!

[exarus]

@jdalton So I want to get small builds of project with lodash, Babel and Webpack 3.

1. is it sufficient to use lodash like this:

import mean from 'lodash-es/mean'

2. Or is it even OK to use lodash like this:

import { mean } from 'lodash-es'

3. Or should I better use combo of these: lodash-es, babel-plugin-lodash, lodash-webpack-plugin.

4. Are there any reasons in Babel + Webpack 3 environment to use lodash over lodash-es?