question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Version 2.0.2 with lodash-es added 7kB to the bundle size

See original GitHub issue

I read that the reason to switch to lodash-es was that few other libs use this version. However, let me highlight that for people like me that use lodash (as the majority of Lodash users based on npm stats) this change increased the build size by 7kB (minified). Moreover, looks like babel-plugin-lodash and lodash-webpack-plugin have no effect on lodash-es. As lodash@5 will probably make lodash-es deprecated (as it will be like it out of the box) is this change really worth it?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
albertogasparincommented, Apr 19, 2017

I don’t know about all other libs, but both redux and react-redux are using a single lodash method (isPlainObject). For people not using lodash at all, the es-version is smaller than the standard one and for people using it the additional cost is ~500B, so negligible.

redux-actions on the over side uses several lodash methods, so the amount of duplicated code jumps to nearly 7kB (worst scenario). I don’t have specific stats about people using redux-actions + lodash vs redux-actions + lodash-es, but @jaridmargolin let me disagree with your “absolutely beneficial” statement.

Anyway, I’ve opened the issue just to be sure that you guys are conscious of the effects of #206. On my end I’ve solved the duplication problem with Webpack:

new webpack.NormalModuleReplacementPlugin(
  /^lodash-es(\/|$)/, (res) => {
    res.request = res.request.replace(/^lodash-es(\/|$)/, 'lodash$1');
  }
)

So I leave it here just in case someone else looks for a solution.

1reaction
jaridmargolincommented, Apr 18, 2017

@yangmillstheory - this is absolutely a beneficial technique accepted by the community.

redux, redux-react, redux-persist, etc (there are more) all use this technique, and being able to share methods with them WILL reduce package size. Some back story on the issue can be found here: https://github.com/reactjs/redux/pull/1369

@albertogasparin - Sorry that the change has temporarily increased your bundle size. Implementing lodash-es within your project may be beneficial as it is already in use by the libraries mentioned above (one of them being a direct dependency). There is no reason to include lodash and lodash-es methods.

* If you do not want to change files manually, perhaps you could implement the same shim the libraries do https://github.com/reactjs/redux/blob/master/build/use-lodash-es.js ?

As lodash@5 will probably make lodash-es deprecated (as it will be like it out of the box) is this change really worth it?

This seems like a problem we can deal with when lodash@5 comes out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Optimize Angular bundle size with these steps | by Rebai Ahmed
Solution: optimize lodash 3rd library import ; //import { includes } from 'lodash'; import · from ; // Add this config to tsconfig.json...
Read more >
lodash-es v4.17.21 Bundlephobia
Size of lodash-es v4.17.21 is 98.0 kB (minified), and 30.6 kB when compressed using GZIP. Bundlephobia helps you find the performance impact ...
Read more >
Angular 9 - lodash is imported in prod bundle even after using ...
I am developing an Angular app, version 9.1.13. After some analysis of my current prod bundle using webpack-bundle-analyzer , I discovered that ...
Read more >
How CommonJS is making your bundles larger - web.dev
In this post, we'll look into what CommonJS is and why it's making your JavaScript bundles larger than necessary.
Read more >
How to Import Lodash in your JavaScript Projects for Lowest ...
Which importing method would result in the lowest bundle size? ... since this approach will be deprecated in the future versions of lodash....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found