React: Bundle in lodash

[ndelangen]

What I did

Hopefully this fixes the problem discribed in this comment:
#28607 (comment)

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-28609-sha-1103d7ff. Try it out in a new sandbox by running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information

Published version	0.0.0-pr-28609-sha-1103d7ff
Triggered by	@ndelangen
Repository	storybookjs/storybook
Branch	norbert/bundle-in-lodash
Commit	1103d7ff
Datetime	Mon Jul 15 15:30:20 UTC 2024 (1721057420)
Workflow run	9942248326

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=28609

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.3 MB	76.3 MB	0 B	-1.35	0%
initSize	198 MB	198 MB	10.4 kB	-0.52	0%
diffSize	122 MB	122 MB	10.4 kB	3.22	0%
buildSize	7.61 MB	7.61 MB	2.53 kB	3.09	0%
buildSbAddonsSize	1.64 MB	1.64 MB	0 B	2.38	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	0 B	2.38	0%
buildSbPreviewSize	351 kB	351 kB	0 B	2.37	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.48 MB	4.48 MB	0 B	2.38	0%
buildPreviewSize	3.12 MB	3.13 MB	2.53 kB	5.94	0.1%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7s	6.9s	-103ms	-1.11	-1.5%
generateTime	21s	22.5s	1.5s	-0.25	6.6%
initTime	21.8s	22.5s	734ms	-0.66	3.3%
buildTime	13.3s	13.4s	58ms	-0.64	0.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	8.4s	7.4s	-953ms	-0.78	-12.7%
devManagerResponsive	5.3s	5s	-302ms	-0.79	-6%
devManagerHeaderVisible	871ms	692ms	-179ms	-1.09	-25.9%
devManagerIndexVisible	907ms	725ms	-182ms	-1.08	-25.1%
devStoryVisibleUncached	1.4s	1.4s	-28ms	-0.03	-2%
devStoryVisible	929ms	746ms	-183ms	-1.09	-24.5%
devAutodocsVisible	855ms	639ms	-216ms	-1.25	🔰-33.8%
devMDXVisible	750ms	687ms	-63ms	-1.2	-9.2%
buildManagerHeaderVisible	751ms	662ms	-89ms	-1.56	🔰-13.4%
buildManagerIndexVisible	756ms	667ms	-89ms	-1.56	🔰-13.3%
buildStoryVisible	807ms	709ms	-98ms	-1.6	🔰-13.8%
buildAutodocsVisible	700ms	607ms	-93ms	-1.56	🔰-15.3%
buildMDXVisible	673ms	585ms	-88ms	-1.41	🔰-15%

[greptile-apps]

PR Summary

• Moved 'lodash' from 'dependencies' to 'devDependencies' in code/renderers/vue3/package.json
• Ensures 'lodash' is only used during development
• Potentially reduces final production bundle size
• Aims to resolve issue mentioned in linked comment

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 55f141a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[valentinpalkovic]

I just looked at how often we are using lodash, and I think if we start to bundle all of them, it would potentially lead to an explosive increase in bundle size.

Let's do this to fix it temporarily, but let's figure out a smaller replacement for lodash in the near future.

I guess we want to prebundle lodash then also in

• renderers/react
• lib/source-loader
• lib/codemod
• lib/blocks
• addons/controls
• addons/a11y

@ndelangen WDYT?

[valentinpalkovic]

@ndelangen Should we use https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore?tab=readme-ov-file#eslint-plugin to replace unnecessary usages of lodash and potentially get entirely rid of it?

[ndelangen]

In this PR I do both renderers, cause that seemed to make sense.

I'm considering blocks and addon-controls as well..
But as the issue suggests an issue in renderers, those are the only ones I did.
Because as you suggest, bundle size is a concern!

The other packages are only run in node AFAIK, and always in CJS, so those don't have to be changed?

I think if we start to bundle all of them, it would potentially lead to an explosive increase in bundle size.

Yes, that's a valid concern! Though it should be able to tree-shake to only the parts of lodash we actually use.
Also, we don't have to guess about the impact; the benchmarking will tell us! 🎉

I'm definitely interested in removing all references to lodash as well.