Reduce Lodash Size In Webpack

Lodash package size is 70KB (24KB if GZipped).

The following code will import entire lodash library, even though you just use the clone function.

import _ from lodashconst object = { 'name': 'Desmond' }const shallow = _.clone(object)

Using the following code will import clone only and significantly reduce the lodash bundle size. If you still want to maintain _ in your code, assigned imported function to _ object.

import clone from 'lodash/clone'const _ = { clone }const object = { 'name': 'Desmond' }const shallow = _.clone(object)

You can also customize and create your own global lodash _ object.

import keyBy from 'lodash/keyBy'import clone from 'lodash/clone'import map from 'lodash/map'global._ = { keyBy, clone, map }const shallow = _.clone(object)

If ESLint complaint of http://eslint.org/docs/rules/no-undef '_' is not defined, edit .eslintrc.js to add globals._ = true.

module.exports = {  ...  globals: {    '_': true  },...}

Sadly the following syntax doesn't work to reduce lodash bundle size (no tree shake).

import { clone } from 'lodash'

You can explore lodash-es which should support the following syntax to reduce bundle size.

import { clone } from 'lodash-es'

You can also look into babel-plugin-lodash (Modular Lodash builds without the hassle).