Skip to content

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

Merged
tbouffard merged 5 commits intomasterfrom
chore/deps_switch_lodash-es_to_es-toolkit
Aug 26, 2024
Merged

chore(deps): switch from lodash-es to es-toolkit#3142
tbouffard merged 5 commits intomasterfrom
chore/deps_switch_lodash-es_to_es-toolkit

Conversation

@tbouffard
Copy link
Copy Markdown
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
@github-actions
Copy link
Copy Markdown

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

@github-actions
Copy link
Copy Markdown

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
@sonarqubecloud
Copy link
Copy Markdown

@tbouffard tbouffard merged commit 3c4c4ea into master Aug 26, 2024
@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