portal-vue icon indicating copy to clipboard operation
portal-vue copied to clipboard

Tree-shaking improvements

Open webistomin opened this issue 3 years ago • 1 comments

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.

webistomin avatar Jan 06 '21 11:01 webistomin

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.

LinusBorg avatar Jan 07 '21 14:01 LinusBorg