ES6 module "lodash-es" increases bundle size

[yogeshgalav]

As per vue optimization page
https://vuejs.org/guide/best-practices/performance.html#page-load-optimizations
I replaced the package "lodash" with "lodash-es"
but it increased the bundle size when using vite v5.4.8 "npm run build"
from 13137.69 KiB to 13348.97 KiB
I didn't made any other change other then replacing the package.

Why it's happening? can anyone help.

[ghiscoding]

Just googling the issue returns a few potential suggestions

• Tree Shaking with lodash-es in Vite doesnt work lodash/lodash#5920
• https://blog.battlefy.com/tree-shaking-lodash-with-vite
• https://github.com/wojtekmaj/vite-plugin-es-toolkit

I'm not longer using Lodash, but just thought of replying with potential solutions anyway

[prisis]

I would try https://www.npmjs.com/package/@optimize-lodash/rollup-plugin, maybe this will help you

[yogeshgalav]

The best way I found to optimize my legacy code is to import lodash functions separately,
convert

import _ from 'lodash-es';

to

import {map as l_map} from 'lodash-es';

[remidej]

Or using this other syntax compatible with tree shaking:

import * as _ from 'lodash-es';

_.map()