How to Import a Single Lodash Function?

Question

Using webpack, I'm trying to import isEqual since lodash seems to be importing everything. I've tried doing the following with no success:

import { isEqual } from 'lodash'

import isEqual from 'lodash/lang'

import isEqual from 'lodash/lang/isEqual'

import { isEqual } from 'lodash/lang'

import { isEqual } from 'lodash/lang'

Answer 1

If you just want to include isEqual and not the rest of the lodash functions (useful for keeping your bundle size small), you can do this in ES6;

import isEqual from 'lodash/isEqual'

This is pretty much the same as what's described in the lodash README, except that there they use require() syntax.

var at = require('lodash/at');

Answer 2

With webpack 4 and lodash-es 4.17.7 and higher, this code works.

import { isEqual } from 'lodash-es';

This is because webpack 4 supports sideEffects flag and lodash-es 4.17.7 and higher includes the flag (which is set to false).

Edit

As of version 1.9.0, Parcel also supports "sideEffects": false, threrefore import { isEqual } from 'lodash-es'; is also tree shakable with Parcel.

Answer 3

Not related to webpack but I'll add it here as a lot of people are currently moving to typescript.

You can also import a single function from lodash using import isEqual from 'lodash/isEqual'; in typescript with the esModuleInterop flag in the compiler options (tsconfig.json)

example

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    ...
  }
}

Answer 4

Lodash lists a couple of options in their README:

• babel-plugin-lodash

  • Install lodash and the babel plugin:

  $ npm i --save lodash
  $ npm i --save-dev babel-plugin-lodash @babel/cli @babel/preset-env
  

  • Add this to your .babelrc

  {
    "plugins": ["lodash"],
    "presets": [["@babel/env", { "targets": { "node": 6 } }]]
  }
  

  • Transforms this

  import _ from 'lodash'
  import { add } from 'lodash/fp'
  
  const addOne = add(1)
  _.map([1, 2, 3], addOne)
  

  Roughly to this:

  import _add from 'lodash/fp/add'
  import _map from 'lodash/map'
  
  const addOne = _add(1)
  _map([1, 2, 3], addOne)
  

• lodash-webpack-plugin

  • Install lodash and webpack plugin:

  $ npm i --save lodash
  $ npm i --save-dev lodash-webpack-plugin babel-core babel-loader babel-plugin-lodash babel-preset-env webpack
  

  • Configure your webpack.config.js:

  var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
  var webpack = require('webpack');
  
  module.exports = {
    'module': {
      'rules': [{
        'use': 'babel-loader',
        'test': /\.js$/,
        'exclude': /node_modules/,
        'options': {
          'plugins': ['lodash'],
          'presets': [['env', { 'modules': false, 'targets': { 'node': 4 } }]]
        }
      }]
    },
    'plugins': [
      new LodashModuleReplacementPlugin,
      new webpack.optimize.UglifyJsPlugin
    ]
  };
  

• lodash-es using the lodash cli

  • $ lodash modularize exports=es -o ./

Answer 5

I think it is worth noting lodash documentation on per method packages to answer this question at least as of June 2020:

Lodash methods are available in standalone per method packages like lodash.mapvalues, lodash.pickby, etc. These packages contain only the code the method depends on.

However, use of these packages is discouraged and they will be removed in v5.

Although they may seem more lightweight, they will usually increase the size of node_modules and webpack/rollup bundles in a project that transitively depends on multiple per method packages and/or the main lodash package. Whereas many methods in the main lodash package share code, the per method packages internally bundle copies of any code they depend on.

The docs actually recommend:

Don't worry—if you import or require methods directly, e.g. const throttle = require('lodash/throttle'), only the subset of lodash code your package uses will be bundled in projects that use your package.

Additionally this page has some pretty interesting research into different import options and resulting build sizes: https://www.blazemeter.com/blog/the-correct-way-to-import-lodash-libraries-a-benchmark

Answer 6

Best way is with the slash:

import isEqual from 'lodash/isEqual'  //or equivalent

Maybe dotted per function packages were the right answer once, but their use is now discouraged and they will be removed.

Also, as stated by Lukas, it's better than import {isEqual} from 'lodash', as this will import all lib and then extract one function to the current scope.

Answer 7

this actually worked for me

import { isEqual } from 'lodash';

Answer 8

import { isEqual } from 'lodash-es'; is importing the entire library. I am using Rollup which should do tree shaking by default.

Whenever I've written my own modules, this named import syntax works and Rollup successfully tree shakes, so I'm a bit confused as to why it won't work with Lodash.

Answer 9

If you're using a REPL on the browser (chrome dev tools or Deno for example), and you really just need to quickly test something without using any IDE, babel or tool, you can import a single or more lodash functions from almost any website unless they're CORS restricted, in the following way:

(arr => Promise.all(arr.map(_ =>
  import ('https://cdn.skypack.dev/lodash.' + _))).then(_ => _[0].default(arr, _.map(d => d.default))))(
  ["zip", "unzip", "groupby", "mapvalues"])
  .then(_ => Object.fromEntries(_)).then(_ => {
  //you can use _ with zip, unzip, groupby, and mapvalues
  console.log(Object.keys(_))
})