[Feature Request]: Drop per-method lodash dependencies

[kubijo]

The problem

You are using several single-method lodash package dependencies in your codebase, which is discouraged even by the authors.

The reason I came up to this is that we have an app where size is a pretty big issue and inspection of the built artifact shows duplication of lodash code... (where the per-method ones are also needlessly big).

The solution

• drop all dependencies where native ECMAScript methods exist
• consider if other methods could be much simplified by using a simplified and project-shared utility that only uses the aforementioned ES6 methods
• replace the rest with a tree-shake-able import from (lodash-es)[https://www.npmjs.com/package/lodash-es]… ideally with a very permissive range on lodash version to make it more likely that it will get deduplicated.

They also have some kind of code mod in the linked docs page, but I have not used it, so I cannot vouch for it.

Examples

No response

Application/PAL

No response

Business priority

High Priority = pressing release

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

@kubijo Thanks for bringing this up! I agree with all points, though I think we could first migrate existing usages to use lodash-es really easily and then later work on refactoring those to native methods.

I don't think the codemod is what we want because it refactors to the main lodash package:

- import get from 'lodash.get'
+ import get from "lodash/get"

- import mapValues from 'lodash.mapvalues'
+ import mapValues from "lodash/mapValues"

- require('lodash.get')
+ require("lodash/get")

- const sortBy = require('lodash.sortby')
+ const sortBy = require("lodash/sortBy")

Whereas we'll instead be aiming for

- import get from 'lodash.get'
+ import { get } from "lodash-es"

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[kubijo]

@tay1orjones I see ... yeah, that does not look great ... the only utility I see would be that it primes your code with changes you would then rewrite, but a pretty simple regex-based search&replace does that too...

[kubijo]

I've also bumped into this thing: https://es-toolkit.slash.page/ through https://storybook.js.org/blog/storybook-8-4/#we-cut-bundle-size-in-half

I did not hear about it previously, but it seems pretty cool if all they say is true...