Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Optimize Lodash imports to reduce bundle size #3980

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

enagorny
Copy link

@enagorny enagorny commented Aug 6, 2024

Description

This PR proposes to optimize Formik's use of Lodash by replacing the full Lodash library with individual method imports. This change aims to reduce the overall bundle size of projects using Formik by only including the specific Lodash methods that Formik requires.

Changes

  • Remove dependencies on full lodash and lodash-es packages
  • Add individual Lodash method packages: lodash.clone, lodash.clonedeep, lodash.isplainobject, lodash.topath
  • Update corresponding TypeScript type definitions
  • Modify import statements in the codebase to use the individual method packages

Motivation

The full Lodash library is quite large, and Formik only uses a few methods from it. By importing only the necessary methods, we can significantly reduce the amount of unused code included in the final bundle.

Potential Impact

  • Reduced bundle size for projects using Formik
  • Potentially faster load times for applications
  • No change in functionality or API

Testing

(Describe any testing you've done here. For example:)

  • Ran the existing test suite to ensure no regressions
  • Manually tested key Formik functionalities
  • Compared bundle sizes before and after the change (provide metrics if available)

Notes for Reviewers

  • Please check if there are any Lodash methods I might have missed
  • Confirm if this aligns with the project's dependency management strategy
  • Suggestions for additional testing or benchmarking are welcome

Copy link

changeset-bot bot commented Aug 6, 2024

🦋 Changeset detected

Latest commit: 5f49e03

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
formik Patch
formik-native Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Aug 6, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
formik-docs ⬜️ Ignored (Inspect) Visit Preview Aug 6, 2024 0:26am

Copy link

codesandbox-ci bot commented Aug 6, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@FezVrasta
Copy link

Seeing a before and after comparison of the library size would be helpful.

@quantizor
Copy link
Collaborator

I found this which might be useful https://www.npmjs.com/package/@optimize-lodash/rollup-plugin

As for whether lodash.* or lodash/* is better, I think it mostly depends on how the lodash library is packaged. If it's importing from lodash.* internally then it won't duplicate the code for a downstream consumer, but if lodash.* are separately-built extractions then I think bundlers would keep both copies if they're in the same project leading to a bit of bloat.

Long story short, I'd say let's do deep imports or consider using that rollup plugin with tsdx.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants