Replies: 2 comments 1 reply
-
|
If you want to make tree-shaking work for Then it is tree-shakable. Unfortunately it seems like you have to import each utility line by line in this fashion. Having been using in my own projects in this way for quite a long time. |
Beta Was this translation helpful? Give feedback.
-
|
I have just tested and it seems that in vue3/vite dev environment it is treeshaked correctly even when you group imports into one line like this: import { isNumber, merge } from 'lodash-es';Apparently even in picture within question post above, there are features missing so I suppose that it is treeshaked as well... there are just a lot dependencies on each other within lodash modules, so it looks like there is full lodash loaded.. but it isn't, I have searched for differenceBy method for example and I don't see it in your picture as well.. I have added it to my code just to console.log it so I can see whether it appears in bundle and tadaa it pops in. So in my opinion treeshakeing lodash-es works 👍 |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me as well on React 18 + Vite 6. Interestingly, importing each function separately - as @idlist suggested - reduced the bundle size by 0.02KB. However, that difference was too small for our team to justify switching to the less convenient approach. |
Beta Was this translation helpful? Give feedback.
-
I’m currently working on a performance improvement ticket, where we aim to replace lodash with lodash-es to increase application performance. The goal is to leverage tree-shaking in Vite so that only the methods we use in the project are included in the final build.
I’ve tried importing lodash-es both as:
import * as _ from 'lodash-es';and as:
import { omit } from 'lodash-es';However, when checking the bundle using the Rollup Visualizer, I still see a lot of unused methods from lodash-es included in the bundle. I´ve also tried to fix the rollupOptions of vite.config.ts like this, but it doesnt help.
build: { rollupOptions: { treeshake: true, } }Do you have any tips or solutions for ensuring that only the necessary methods are bundled? Any advice on how to configure Vite or adjust imports to improve the tree-shaking process would be greatly appreciated.
Thanks in advance!
Beta Was this translation helpful? Give feedback.
All reactions