Tree shaking with lodash-es

Question

I'm trying to configure tree shaking for our bundles using webpack. I'm looking to replace lodash with lodash-es. I know there are webpack plugins that will enable lodash tree-shaking but I'm looking to go straight to lodash-es cause our webpack configuration is a little complex.

When I look at the bundle size, I notice that the bundle is a lot smaller when I import using absolute path like: import merge from 'lodash-es/merge' as opposed to using a named import like: import { merge } from 'lodash-es'.

Is this an expected behaviour or is this more indicative of tree-shaking not being configured properly?

Answer 1

This should be tree shaken correctly:

• lodash-es/package.json sets sideEffects: false, at least in the current version

Other things you can check:

• if you have optimizations on - may it's a development build, and the tree shaking is not done
• if you have babel or some other tool turning your es-module into something that doesn't work with treeshaking.