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

Tree-shaking improvements #322

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Conversation

webistomin
Copy link

Hi. We are using your library in our design system. And portal-vue appears in bundle even when we are not importing dependent components. I checked your esm bundle with agadoo. Seems like your package has problems with tree-shaking.

Failed to tree-shake dist/portal-vue.esm.js

So I added #__PURE__ annotations for every Vue.extend() expression. I think it helped. At least agadoo thinks so.

Success! dist/portal-vue.esm.js is fully tree-shakeable

Also I added size-limit package to test tree-shaking and import cost.

Before:

Total
Size limit: 3 KB
Size:       2.51 KB with all dependencies, minified and gzipped

Portal
Package size limit has exceeded by 413 B
Size limit: 2 KB
Size:       2.4 KB with all dependencies, minified and gzipped

PortalTarget
Package size limit has exceeded by 413 B
Size limit: 2 KB
Size:       2.4 KB with all dependencies, minified and gzipped

MountingPortal
Size limit: 2.5 KB
Size:       2.4 KB with all dependencies, minified and gzipped

Wormhole
Package size limit has exceeded by 413 B
Size limit: 2 KB
Size:       2.4 KB with all dependencies, minified and gzipped

After:

Total
Size limit: 3 KB
Size:       2.51 KB with all dependencies, minified and gzipped

Portal
Size limit: 2 KB
Size:       1.93 KB with all dependencies, minified and gzipped

PortalTarget
Size limit: 2 KB
Size:       1.93 KB with all dependencies, minified and gzipped

MountingPortal
Size limit: 2.5 KB
Size:       2.4 KB with all dependencies, minified and gzipped

Wormhole
Size limit: 2 KB
Size:       1.93 KB with all dependencies, minified and gzipped

There are 2 new commands in package.json:

Command Result
yarn tree-shake Check tree-shaking with agadoo
yarn size Run size-limit and check bundle size

I will be glad if you merge this PR or fix it by yourself.

@LinusBorg
Copy link
Owner

Thanks, this is awesome work!

I will get this merged, but it may take a bit as I'm still focussing on getting v3 for Vue 3 up and running.

This will definetely get added when I can make the time though.

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 this pull request may close these issues.

2 participants