Skip to content

Replace lodash with es-toolkit #224

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

dayongkr
Copy link

@dayongkr dayongkr commented Jul 1, 2025

Replace lodash with es-toolkit for better performance and smaller bundle size

Summary

This PR replaces lodash dependencies with es-toolkit to improve performance and reduce bundle size in dev-tools.

Changes

  • Replaced lodash functions with es-toolkit/compat equivalents:
    • get function: Reduced from 1,279 lines to 175 lines
    • isObject function: Using es-toolkit's lodash-compatible version
    • isUndefined → Direct JavaScript syntax (target === undefined)

Performance Improvements

  • Bundle size reduction: Significant decrease in build size due to smaller function implementations
  • Runtime performance: ~1.5x faster performance in most scenarios according to benchmarks
  • Code optimization: Removed unnecessary memoization features while maintaining functionality

Why es-toolkit?

  1. Active maintenance: Unlike lodash, es-toolkit is actively maintained and optimized
  2. 100% compatibility: es-toolkit/compat passes all lodash test suites and maintains identical interfaces
  3. Industry adoption: Already used by major projects like Storybook and Recharts
  4. Modern optimization: Built with modern JavaScript performance optimizations

Technical Details

The get function optimization was achieved by:

  • Removing redundant memoization logic
  • Streamlining the implementation without sacrificing functionality
  • Maintaining full API compatibility through es-toolkit/compat

Testing

  • All existing tests pass without modification
  • es-toolkit/compat ensures 100% API compatibility with lodash
  • No breaking changes for consumers

Future Plans

This is part of our ongoing performance improvement initiative. We recommend migrating from the unmaintained lodash to the modern, performant es-toolkit.

@@ -72,7 +72,7 @@ export function useExportControlToExtension({

const nativeFields = flatFieldNames.reduce((prev, name) => {
const field = get(control._fields, name)?._f;
prev[name] = get(field, 'ref')?.type;
prev[name] = (get(field, 'ref') as any)?.type;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this project, you used an older version of @types/lodash where get was implemented to return any. However, es-toolkit/compat matches type compatibility based on the latest @types/lodash, which broke this code. So I explicitly used as to cast the type as it was previously inferred(any) in the older version.

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.

1 participant