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

Smaller bundles #843

Closed
fabiospampinato opened this issue May 19, 2019 · 5 comments · Fixed by #850
Closed

Smaller bundles #843

fabiospampinato opened this issue May 19, 2019 · 5 comments · Fixed by #850

Comments

@fabiospampinato
Copy link
Contributor

When installed mermaid is pretty heavy on disk, requiring about 39MB of stuff to be downloaded. I see pre-bundled versions of the library are provided under the dist directory, but I think there are still some simple ways to make the bundles significantly smaller, I propose to make the following changes:

  • Replace moment with with dayjs. moment is a notoriously heavy library, and we are only using it for formatting some dates. Even if we are not using all other moment's many features or provided localizations we are still paying for them in the bundle.
  • Slim down lodash. The whole of lodash is currently included in the bundle, even though out of the 330+ provided methods only the following ones are being used: each, extend, find, isArray, isString, map, maxBy, orderBy, uniqBy. I propose to replace some of these with plain JS (each, map, isString, isArray, find, maybe also extend), unless very old browsers are supposed to be supported, and require the specific modules for the others (lodash.maxBy, lodash.orderBy and lodash.uniqBy).
  • Avoiding publishing the src directory to NPM. Here we are including it in the published package, I don't see why that'd be useful to the end user, so I propose to avoid publishing that folder.

I'd like to submit PRs implementing these suggestions, would those PRs be welcome? @knsv @tylerlong

Thanks!

@fabiospampinato
Copy link
Contributor Author

fabiospampinato commented May 19, 2019

Btw I've just published mermaid-bundled, which is simply the file found under dist/mermaid.js, but on its own module.

Just importing this instead of the regular mermaid shaved ~15MB off my app.

Also dist/mermaid.min.js for some reason doesn't work for me, if I try importing it I get an error, perhaps the minification has performed some unsafe operations.

@knsv
Copy link
Collaborator

knsv commented May 29, 2019

Good suggestions we should do this.

@fabiospampinato
Copy link
Contributor Author

@knsv do you want me to submit a PR for this?

@knsv
Copy link
Collaborator

knsv commented May 29, 2019

Yes please. That would be much appreciated

@fabiospampinato
Copy link
Contributor Author

Awesome! I'll try to fix the file under dist/mermaid.min.js too while I'm at it (it throws an error for me).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants