CODEWITHSUNDEEP
webpacklodash
james emanon
james emanon

Reputation: 11807

Webpack and single import lodash methods AND MY BUNDLE WENT UP, how?

So, I went thru my legacy app and there were a few:

import _ from 'lodash';

a TON of

import { method1, method2, method 3} from 'lodash';

so, changed them all to:

import method1 from 'lodash/method1';
import method2 from 'lodash/method2';

then others

 import somFPmethod from 'lodash/fp/somFPmethod;

I think there is a total of like 15 or unique methods thruout the app.. ie. isObject, merge , keys, last, flow

I was expecting my app bundle (unminified) to go from 11.8 to like, 11.5 or something....

IT WENT UP!

BUNDLE FILE

BEFORE LODASH CHANGES:
    
Content-Length: 11813398
    
    

AFTER LODASH CHANGES:

    Content-Length: 11991182

How is this even possible?

I am using: "lodash": "^4.17.15",

Upvotes: 0

Views: 818

Answers (2)

Dale Ryan
Dale Ryan

Reputation: 843

This was discussed on lodash website: https://lodash.com/per-method-packages

Per Method Packages

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.

For example, throttle uses debounce internally. In a project using both methods from the main lodash package, throttle will import the same debounce module as any code that imports debounce directly, so only one copy of debounce will wind up in a webpack bundle.

On the other hand, if a project imports throttle from lodash.throttle, the extra copy of the debounce code internally bundled into lodash.throttle will wind up in the webpack bundle, in addition to debounce from the main lodash package or lodash.debounce.

Upvotes: 1

th3n3wguy
th3n3wguy

Reputation: 3747

It doesn't matter whether you are importing a single function or the entire Lodash package whenever you are using the primary Lodash NPM package (npm install lodash). If you want to have a reduced-size version of Lodash and import specific functions, then you need to use the lodash-es package instead:

https://www.npmjs.com/package/lodash-es

Then, you can import specific functions like this instead:

import { isEqual, isNil } from 'lodash-es';

// Additional option: Allows you to alias the imports so you don't get naming conflicts.
import { isEqual as _isEqual, isNil as _isNil } from 'lodash-es';

Upvotes: 0

Related Questions