Lodash import - done Right!
Tags: javascript, lodash
Published: 2020-10-10 22:01:20

Lodash one of the most popular libraries which helps to optimize common things and not reinvent the wheel.

![Lodash all the things meme image](https://dev-to-uploads.s3.amazonaws.com/i/z94l9otvkhjdohikn8n7.jpeg)

When we write code often we import lodash in different ways but is there any difference? is it influences our app?

in order to answer these questions, let's make an experiment.

![and waayy we go](https://dev-to-uploads.s3.amazonaws.com/i/fqkaxwmsfebhk6ypt1j3.gif)

So first as usual we need a playground, in this case, I will use simple CRA.

```
npx create-react-app lodash-import-experiment --template typescript && cd lodash-import-experiment && yarn add lodash
```
before we start to do something lets measure the base size and dependencies structure. [analyzing-the-bundle-size](https://create-react-app.dev/docs/analyzing-the-bundle-size/), to make the experiment clear I will add some test code which later will be used with Lodash.

# Interesting part starts HERE

#### here is our awesome app code

![base app code](https://dev-to-uploads.s3.amazonaws.com/i/u81ch6zm2rmxv1vtve41.png)

#### and its results

![Base app result](https://dev-to-uploads.s3.amazonaws.com/i/bamnxk7mq3aw7ojnc8tq.png)


##First try
 

**import lodash from 'lodash'**

![App code with lodash imported classic way](https://dev-to-uploads.s3.amazonaws.com/i/8ux2pld5nhaw8ppimdkg.png)

![App code result with lodash imported classic way](https://dev-to-uploads.s3.amazonaws.com/i/glff4bkwlpii4g9h7v2r.png)

Somebody told me once use destructuring import and webpack tree shaking will do the ~~sh*t~~ magic.


##Second try


this time let's try to use destructuring import.

**import { merge } from "lodash"**


![App code example with lodash destructuring import](https://dev-to-uploads.s3.amazonaws.com/i/l8tgrmcx4e29bsts2565.png)

![App result example with lodash destructuring import](https://dev-to-uploads.s3.amazonaws.com/i/w6wourp2ld1ec7txb89r.png)

as you may see nothing has changed.


##Third try


this time tried to use direct import for *merge* function.

**import merge from "lodash/merge"**

![App code example with direct import from lodash](https://dev-to-uploads.s3.amazonaws.com/i/q73uinthcbxbi0uyllsm.png)

![App code result with direct import from lodash](https://dev-to-uploads.s3.amazonaws.com/i/97uhz8fn5n5chqy4p0ah.png)

So as you may see this is the game-changer. import cost is only 12.39 kb vs 71.15 for both destructuring and classic imports. The only bad thing here that you will end-up with import hell. 

At this point I started to remember that somebody told me once, "use **lodash/fp** always it has better tree shaking and there will be no import hell + FP functions written more optimized way so import cost will be definitely less. 

![Oh really meme](https://dev-to-uploads.s3.amazonaws.com/i/ka7f03uxt4498edqnqyh.jpeg)

So let's check if it's true.


##Forth try


import { merge } from 'lodash/fp'

![App code example with destruct import from lodash/fp](https://dev-to-uploads.s3.amazonaws.com/i/jte68wved8v2nh4v7w5y.png)

![App code result with destruct import from lodash/fp](https://dev-to-uploads.s3.amazonaws.com/i/r2akghhh9g5g3doxc9o7.png)

as you may see despite it doesn't help it even brings an additional +8.57kb of weight comparing to destructuring import from lodash. So my pall was definitely wrong.

So I could stop here but I decided to check all cases as in the first part of the experiment with lodash.


##Fith try 
(to kill curiosity and keep no answered questions)


classic import lodash from "lodash/fp"

![App code example with classic import from lodash/fp](https://dev-to-uploads.s3.amazonaws.com/i/ukx9tff6donnt1r82elp.png)

![App code example results with classic import from lodash/fp](https://dev-to-uploads.s3.amazonaws.com/i/lfym3ew77zf2l9ce23s8.png)

also, let's check direct import merge from "lodash/fp/merge"

![App code example with lodash/fp direct import](https://dev-to-uploads.s3.amazonaws.com/i/ejhflols78u652zsh1np.png)

![App code result with lodash/fp direct import](https://dev-to-uploads.s3.amazonaws.com/i/20ss6t369gddbejsle3n.png)

again as you may see import cost with direct import less comparing to classic and destructuring import.

to sum-up things, I've created a table.

![Lodash import aggregated results table](https://dev-to-uploads.s3.amazonaws.com/i/2d4kfsykrcec53brehrq.png)

##Conclusion

- Always use direct imports (keep only things you need)
- Use fp-funcs only when you really need FP patterns and behavior