reaviz / reaflow

🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
https://reaflow.dev
Apache License 2.0
2.11k stars 122 forks source link

Huge bundle size #224

Open AykutSarac opened 1 year ago

AykutSarac commented 1 year ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Currently bundle size is very big due to elkjs, it effects both the IDE and the performance of the applications.

image

Expected behavior

Bundle shouldn't be that big.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment


Libs:
- react version: X.Y.Z
- realayers version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: XX  
- Platform:  

Others:

amcdnl commented 1 year ago

ELK.js is the core layout library - i will investigate if there is a better way to bundle it

AykutSarac commented 1 year ago

I see that 'elk.bundled' could be potentially replaced with 'elk-api' which reduce bundle size significantly.

amcdnl commented 1 year ago

Oh really? Mind sharing details?

AykutSarac commented 1 year ago

Oh really? Mind sharing details?

I just tried it as mentioned here: https://github.com/kieler/elkjs#typescript However it needs workerUrl if it will use the elk-api, not sure if there's but maybe you can come up with a solution (maybe dynamic loading? not sure).

amcdnl commented 1 year ago

Well if you dynamic loaded, wouldn't you still have a large size ( just happens later )?

AykutSarac commented 1 year ago

Definitely 😞 I was thinking it could be opt'd like the developer can pass the workerUrl from a cdn but for offline development you'd still need the package... Elkjs is a very high weight package as a dependency.

amcdnl commented 1 year ago

Ya, ELK is not fun to work with either but it has the best layout engine that I've found.