Skip to content

Conversation

@tbouffard
Copy link
Member

@tbouffard tbouffard commented May 31, 2024

DISCLAIMER

  • this PR is for exploration and information only
  • it is not intended to be merged

Context

maxGraph provides style defaults which is great for users, especially when evaluating the library.
It is also possible to override the defaults.

However, currently (v0.10.3), if my application doesn't use part of these defaults, the related code is imported.
For example, if my application doesn't need the PanningHandler plugin, it will be imported as the Graph class directly uses it (as part of the default plugins array which is always initialized whether it is used).
This increase the size of my application.

Prior providing ways to improve the tree-shaking in this situation, here are some figures about the impact of this defaults in 2 very simple applications included in this repository.

Disclaimer

The sole purpose of this PR is to measure the impact of removing default style registration on the tree-shaking.
The TypeScript compilation pass here but some features are lost or may not work in the 2 examples used to measure the impact of the removals.

Results

IMPORTANT: This PR is based on a commit older than https://github.com/maxGraph/maxGraph/releases/tag/v0.12.0, so prior than maxGraph has been marked a side-effects free. Results could now be different.

base commit: 6144386 (v0.10.3 + few changes)
A dedicated commit in the branch of this PR is available for each test.
The TS compilation is OK, but this may change the behavior of the application (we don't care, this is not what we test here).

ts-example

Build with vite/esbuild, maxGraph chunk

  • base: 468.63 kB
  • defaultPlugins set to [] (i.e. no plugin): 431.23 kB
  • no registerDefaultShapes: 452.79 kB. Notice that ts-example includes custom shapes using rectangle and ellipse + maxGraph declares shape constructors for default values (at least text and connector)
  • remove all EdgeStyle (keep only EdgeStyle Loop which is defined in Graph.defaultLoopStyle) 446.27 kB
  • remove all Perimeter (ts-example used one):  460.50 kB
  • remove markers 467.12 kB
  • removing all: 383.26 kB --> decrease: 85.37kB

js-example

Build with webpack, main.js:

  • base: 513.8kB
  • removing all: 438.14kB --> decrease: 75.66kB

@tbouffard tbouffard added the chore Build, CI/CD or repository tasks (issues/PR maintenance, environments, ...) label May 31, 2024
@tbouffard tbouffard changed the title chore: experiment [POC] chore: measure impact of the default style configuration on tree-shaking [POC] May 31, 2024
@tbouffard tbouffard changed the title chore: measure impact of the default style configuration on tree-shaking [POC] chore: measure impact of the default configuration on tree-shaking [POC] Aug 16, 2024
@tbouffard
Copy link
Member Author

POC completed, so closing the PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore Build, CI/CD or repository tasks (issues/PR maintenance, environments, ...)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant