Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

import throttle from 'lodash/throttle' is actually better at reducing bundle size than 'lodash.throttle' #55

Open
jedwards1211 opened this issue Aug 21, 2019 · 2 comments · May be fixed by #56
Open

import throttle from 'lodash/throttle' is actually better at reducing bundle size than 'lodash.throttle' #55

jedwards1211 opened this issue Aug 21, 2019 · 2 comments · May be fixed by #56

Comments

@jedwards1211
Copy link

jedwards1211 commented Aug 21, 2019 •
edited

See lodash/lodash#3838

If two lodash per-method packages, e.g. lodash.throttle and lodash.debounce, depend on an underlying lodash function (public or internal API), that function will be inlined in each of the modular build packages, bloating webpack bundle size. The modular build packages can't share any code.

On the other hand, if your package imports from lodash/throttle, and another package imports from lodash/debounce, they can share any underlying code they depend on and the webpack bundle will be smaller.

So the per-method packages really have no advantages, and John-David Dalton pointed out that they're going to be removed in v5.

Having lodash as a dependency is perfectly fine as long as you always import from submodules, never its root module.
@jedwards1211 jedwards1211 changed the title import throttle from 'lodash/throttle' is actually better at reducing bundle size than lodash.throttle import throttle from 'lodash/throttle' is actually better at reducing bundle size than 'lodash.throttle' Aug 21, 2019
@jedwards1211
Copy link
Author

jedwards1211 commented Aug 21, 2019 •
edited

Here's a demonstration of this. Since throttle uses debounce internally, importing lodash/throttle and lodash/debounce is able to share the debounce code and make a smaller bundle. But if you import lodash.throttle and lodash.debounce, the debounce code is duplicated internally in lodash.throttle, making a bigger bundle.

lodash-submodules.js

import throttle from 'lodash/throttle'
import debounce from 'lodash/debounce'

webpack lodash-submodules.js

sset      Size  Chunks             Chunk Names
main.js  3.79 KiB       0  [emitted]  main
Entrypoint main = main.js
[4] ./lodash-submodules.js 78 bytes {0} [built]
[8] (webpack)/buildin/global.js 472 bytes {0} [built]
    + 13 hidden modules

lodash-per-method-packages.js

import throttle from 'lodash.throttle'
import debounce from 'lodash.debounce'

webpack lodash-per-method-packages.js

  Asset      Size  Chunks             Chunk Names
main.js  4.55 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] (webpack)/buildin/global.js 472 bytes {0} [built]
[1] ./lodash-per-method-packages.js 78 bytes {0} [built]
    + 2 hidden modules

jedwards1211 added a commit to jedwards1211/react-on-screen that referenced this issue Aug 24, 2019
@jedwards1211
fix: use main lodash instead of lodash.throttle
c8fd33f 
fix fkhadra#55
@jedwards1211 jedwards1211 linked a pull request Aug 24, 2019 that will close this issue
Open
@re-thc re-thc mentioned this issue Jan 9, 2020
Closed
@hems
Copy link

hems commented Apr 14, 2020

thanks for the info

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@hems @jedwards1211