9

I see that importing the entire lodash library takes up quite a bit of space on disk:

$ du . | grep lodash
1696    ./lodash/fp
5000    ./lodash

In my code I am just doing

require('lodash');

and my package.json just looks like:

"dependencies": {
   ...
   "lodash": "^4.6.1",
   ...
}

Note that this is for a backend project only, not for web, if that makes a difference.

So my question is - what is the latest way of just importing a slice of lodash (just the functions I need) without importing the whole damn thing?

It looks like here are some answers:

https://gist.github.com/callumlocke/bbfc524eaed6b3556dab

My guess is that I should be using the dot syntax for my backend project:

"dependencies": {
   ...
   "lodash.X": "^4.6.1",
   ...
}

and then import it like so:

 require('lodash.X');
Alexander Mills
  • 90,741
  • 139
  • 482
  • 817

3 Answers3

18

Two ways

There are two ways to do it:

  1. You can use packages with the individual functions and e.g. require('lodash.head')
  2. You can use the full package and e.g. require('lodash/head')

require('lodash.head')

You install the package with individual function:

npm install --save lodash.head

This adds this to package.json:

"dependencies": {
  "lodash.head": "^4.0.1"
}

You use it with:

var head = require('lodash.head');

require('lodash/head')

You install the full lodash package:

npm install --save lodash

This adds this to package.json:

"dependencies": {
  "lodash": "^4.17.4"
}

You use it with:

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

More examples

More complex example:

You can have _ with two functions that you need:

var head = require('lodash.head');
var tail = require('lodash.tail');
var _ = {pick, defaults};

Similar effect, different style:

var _ = {
  head: require('lodash.head'),
  tail: require('lodash.tail'),
};

Explanation

If you want only some part of lodash, like e.g. lodash.pick then use:

For more examples of single functions packaged as modules see:

You can also use custom builds, see:

When you use the full package and import only the functions that you need with:

var _ = {
  head: require('lodash/head'),
  tail: require('lodash/tail'),
};

Then some tools like Webpack may be able to optimize your build to include only the code that you actually use. When you import the entire lodash with:

var _ = require('lodash');

then static analysis cannot be sure which function will be used at runtime so it's harder to optimize well and usually more code is included in the build than is actually needed.

rsp
  • 107,747
  • 29
  • 201
  • 177
  • 2
    Individual method packages will be removed in v5 of lodash. See https://lodash.com/per-method-packages – Waseem Jan 05 '21 at 19:15
5

Using ES6 modules, this could be done like this as well:

import isEqual from 'lodash.isequal';

Reference

Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
0

As pointed in this answer, you can use lodash-es as an alternative. Instead of running npm install lodash ... for every single lodash function that you want to use. By using lodash-es you only need to install it once, then you can import whatever lodash function you want to use in your code.

Install lodash-es using NPM:

npm install lodash-es

To import specific function, said isEqual,

import { isEqual } from "lodash-es";

Now, you can use isEqual function inside your code.

const a = {a: "a"};
const b = {b: "b"};

if (isEqual(a, b)) {
  //do something
}

Although, this is for backend project only in your case. But, FYI and other readers who may land here, webpack plus lodash-es can reduce my bundle size down to 18 kb from 78 kb with general lodash.

fsevenm
  • 791
  • 8
  • 19