search

kartsims / vue-customelement-bundler

How to bundle a Vue.js components in a single JS file, to be used in any HTML/JS app
http://vuetips.com/vue-web-components
126 stars 20 forks source link

Optimising webpack build #1

Closed anthonygore closed 7 years ago

anthonygore commented 7 years ago

I've been able to minimise your build file to about 113KBs

kartsims commented 7 years ago

Sweet! Thanks man, great work 💯

It's strange though that we can't go below 113kB given that (Vue.js minifed](https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js) is 27.5kB, vue-custom-element is 8kB and my custom code is quite light.

27.5 + 8 + a few extra for the custom component = 35.5kB+

Still a bit far from the 113kB

Weird... There seems to be more room for optimization !

Note : I disabled the sourcemap by default.

anthonygore commented 7 years ago

vue.min is only 27.7kbs when served gzipped from a CDN. If you look at the vue.min source it's actually about 75kbs.

I've submitted another pull request which gets the size down to 90kbs. If you inspect the webpack build, you'll see you really cant get any smaller than that because it just includes webpack bootstrap code, vue, vue-customelement and the bundled up custom code.

anthonygore commented 7 years ago

Btw if you compress the output file it goes down to about 31kbs, so that's the kind of size you could serve it at in production ;)

kartsims commented 7 years ago

You are absolutely right I didn't pay attention. Thanks for the input !

kartsims commented 7 years ago

I'll update the post in a few minutes