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

chore(deps): switch from lodash-es to es-toolkit #3142

Merged
merged 5 commits into from
Aug 26, 2024

Conversation

tbouffard
Copy link
Member

@tbouffard tbouffard commented Aug 13, 2024

es-toolkit is a state-of-the-art, high-performance JavaScript utility library with a small bundle size and strong type annotations.

Advantages for bpmn-visualization:

  • receive more updates
  • optimize for ESM
  • better tree-shaking
  • provide types out of the box (for lodash-es, we needed to use a package provided by DefinitevlyTyped)
  • provide CommonJS files as well, so we are no longer forced to use a trick as we did for lodash-es in the jest configuration of the integration test (which doesn't provide CommonJS file)

The performance tests were run on Ubuntu 22.
They include results for master a5886d1 and for switching to es-toolkit.

Notes

For information about the lodash-es introduction in bpmn-visualization, see #2678

Bundle size decrease

bpmn-visualization.min.js size decrease: 2887b / 2.82kb

efc35ad (latest available commit GH Actions run at the time of the PR creation)
https://github.com/process-analytics/bpmn-visualization-js/actions/runs/10348508718

bundle master efc35ad new
bpmn-visualization.js 1 678 013 1 672 399
bpmn-visualization.min.js 988 708 985 821

Rollup decrease detection

efc35ad

mxgraph - 2.27 MB (85.88%)
app - 286.9 kB (10.83%)
fast-xml-parser - 63.92 kB (2.41%)
lodash-es - 16.89 kB (0.64%)
strnum - 4.82 kB (0.18%)
rollup helpers - 1.55 kB (0.06%)

new

mxgraph - 2.27 MB (86.39%)
app - 286.9 kB (10.90%)
fast-xml-parser - 63.92 kB (2.43%)
strnum - 4.82 kB (0.18%)
rollup helpers - 1.55 kB (0.06%)
es-toolkit - 1.07 kB (0.04%)

Performance tests results

On Ubuntu 22, master a5886d1

No change. Tests are run 5 times for each commit.
Notice that lodash/es-toolkit are not involved in the "load" tests

perf_test_annotated_Screenshot 2024-08-25 at 20-34-40 combined amCharts

Resources

https://github.com/toss/es-toolkit

https://es-toolkit.slash.page/performance.html (but no figures about the throttle/debounce functions we are using)

Designed with performance in mind, es-toolkit provides an average of 2× performance improvement compared to alternative libraries like lodash. Some functions achieve up to an 11× performance gain by fully utilizing modern JavaScript APIs.

> es-toolkit is a state-of-the-art, high-performance JavaScript utility library with a small bundle size and strong type annotations.

Advantages for `bpmn-visualization`:
  - receive more updates
  - optimize for ESM
  - better tree-shaking
  - provide types out of the box (for lodash-es, we needed to use a package provided by DefinitevlyTyped)
  - provide CommonJS files as well, so we are no longer forced to use a trick as we did for lodash-es
  in the jest configuration of the integration test (which doesn't provide CommonJS file)
@tbouffard tbouffard added dependencies Pull requests that update a dependency (dev or runtime) javascript Pull requests that update Javascript code labels Aug 13, 2024
Copy link

github-actions bot commented Aug 13, 2024

🎊 PR Preview c54c5d5 has been successfully built and deployed to https://process-analytics-bpmn-visualization-js-demo_preview-pr-3142.surge.sh

🕐 Build time: 0.011s

🤖 By surge-preview

Copy link

github-actions bot commented Aug 13, 2024

🎊 PR Preview c54c5d5 has been successfully built and deployed to https://process-analytics-bpmn-visualization-js-doc_preview-pr-3142.surge.sh

🕐 Build time: 0.012s

🤖 By surge-preview

Test Suites: 2 passed, 2 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        64.674 s
Test Suites: 2 passed, 2 total
Tests:       10 passed, 10 total
Snapshots:   0 total
Time:        61.914 s, estimated 64 s
@tbouffard tbouffard requested a review from csouchet August 26, 2024 05:44
@tbouffard tbouffard marked this pull request as ready for review August 26, 2024 05:45
Copy link

@tbouffard tbouffard merged commit 3c4c4ea into master Aug 26, 2024
26 checks passed
@tbouffard tbouffard deleted the chore/deps_switch_lodash-es_to_es-toolkit branch August 26, 2024 08:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency (dev or runtime) javascript Pull requests that update Javascript code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants