Reduce mermaid size by 31%

[sidharthv96]

📑 Summary

Some optimizations to reduce our output size

Bundle	Initial (KiB)	Final (KiB)	Change	% Change
mermaid.js	2281.14	1563.71	-718.14	-31.48
mermaid.core.mjs	1080.73	1025.56	-54.76	-5.07

📏 Design Decisions

Detailed blogpost: https://www.sidharth.dev/posts/mermaid/shrinking-mermaid/
Is built on top of #3809
Special thanks to @aloisklink :)

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

[aloisklink]

Looks amazing! This is a huge difference. I love the blog post too!

One issue, but it's my fault! I've updated my branch and I edited my commits, so the commits you were basing your branch on no longer exists.

Can you try running the following to rebase your changes away from my outdated commits and onto my new commits:

git rebase --rebase-merges \
  --onto fd76e0e27095997c2ac21902c0629cd6600e30d9 \
  d708ed8950b00fcfd707360165d0c183909584d2 \
  sidv/optimizeSize

You may need to first git pull/fetch my PR #3809 changes.
There did seem to be some merge conflicts, but I think they are relatively minor (mostly because I added extensions to some files).

Where fd76e0e is my new HEAD commit of PR #3809 and d708ed8 was the old HEAD commit still in your branch.

Edit: It might be worth making this a draft until #3823 and #3809 are merged, since this PR depends/contains commits from both of them.

[weedySeaDragon]

Separate PR: Can we add an automated step in the lint pnpm script to check for imports that might increase the size again? That could stop people like me from using an import statement that would bloat the size again. ;-)

Maybe use a regexp to specifically check for the lodash import for now?

[sidharthv96]

@weedySeaDragon, I was thinking of a bot/action that checks the change in the following for every PR.

• Bundle Size
• Code Coverage
• ESLint Warnings

Anything else?

Also, are there any tools which can be readily used for this?

[weedySeaDragon]

Bundle Size
Code Coverage
ESLint Warnings

There are definitely tools that will check those things automatically (you probably are well aware of them already).

Re: checking specifically for specific statements (e.g. import { whatever } from "lodash"; or some other import statement), the one I'm most aware of is [danger](https://danger.systems/js/) -- which lets you set up whatever custom checks you want. Goal is to automate what is done in a code review as much as possible. (Have used it for ruby projects.)

[sidharthv96]

There are definitely tools that will check those things automatically (you probably are well aware of them already).

Tools to check, yup. But I was thinking of tools that report diff as a comment on each PR. Perhaps a github bot.

---

I've added the lodash eslint rule to catch lodash issues.

[weedySeaDragon]

@sidharthv96 There are definitiely tools to that comapre PRs as they come in. I'll look and post what I find in the Discussions.