Plugin adds weight to project

[frankstallone]

I am running into an issue where it appears babel-lodash-plugin is doing something odd. At the moment I describe it as, it is now bundling all of lodash and just the methods being used. I am having a hard time figuring out if this is an issue with my dependencies or not, maybe someone can help.

I am going to share three screenshots for the purpose of argument. These are from webpack-bundle-analyzer which I have been using in an attempt to get this working. Before I do, let me explain the structure of the project. To make this more succinct I will abstract away what isn't relative.

We have a project, and that project has a dependency on another internal package that houses all of our UI input components. Those UI input component use various dependencies themselves, in this case lodash.

Project Tree

project
└── ui-input-components
    └── common
    └── ui-components
    └── ui-display
    └── ui-input
    └── ui-intl
    └── ui-people
    └── ui-search
    └── ui-svg
    └── ui-timeline

Here is what I am seeing from the webpack-bundle-analyer, with captions below each screenshot.

☝️ This is what the bundle for the project looks like without babel-lodash-plugin ☝️ This is what the bundle for the project looks like with babel-lodash-plugin ☝️ BONUS: This is what the bundle for the project looks like with babel-lodash-plugin and lodash-webpack-plugin

I went through the pain staking process of ensuring we are properly importing instead of requireing. I also converted my .babelrc to babel.config.js and removed the line exclude: \node_modules\ from babel-loader in webpack.config.js (Thank you @loganfsmyth for your help with this) . Finally, I tried going more explicit like, import get from 'lodash/get';, to no avail.

My only theory here has to do with the ui-input-components. This package does not have webpack, nor babel. The build step literally builds everything in src/packages/* with tsc then copies all of that to the root (as shown in the above project tree).

In this scenario -- is babel-lodash-plugin unable to work properly? Let me know if I can articulate this any more clear. Thank you for writing such a great plugin and documenting it well. This and lodash-webpack-plugin are really straight forward plugins. Easy to implement.

[rpivo]

Seems like this article from March 2019 describes a similar situation: https://www.azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash/

Really wanting to give babel-lodash-plugin and lodash-webpack-plugin a try, but hoping I don't run into this issue 😬.

(edit: Was able to get babel-lodash-plugin working on my end. Shaved off about 0.3mb off my build files.)

[frankstallone]

It is very possible this advice is what I needed:

"Tree-shaking is syntax-sensitive. To enable tree-shaking in lodash, you have to import functions using syntax like import foo from 'lodash/foo'. import { foo } from 'lodash' will not tree-shake..."

This ball is still in the air for me. I'll revisit that branch again soon. Glad you got it working on your project.

[frankstallone]

Thanks @jdalton? I don't see a solution here per say but okay.