Reduce Lodash Size In Webpack

January 7, 2018

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 lodash

const 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).

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.