CODEWITHSUNDEEP
node.jsnpmunderscore.jslodashnpm-install
Alexander Mills
Alexander Mills

Reputation: 100010

Importing individual lodash functions instead of whole lodash project

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');

Upvotes: 9

Views: 14078

Answers (3)

fsevenm
fsevenm

Reputation: 959

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.

Upvotes: 0

Fellow Stranger
Fellow Stranger

Reputation: 34013

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

import isEqual from 'lodash.isequal';

Reference

Upvotes: 5

rsp
rsp

Reputation: 111336

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.

Upvotes: 18

Related Questions