vuejs bundle size

khilliard commented 6 years ago

I have written a very small vuejs app. It's not a good sign has a bundle size over 2.5MB. It's hard to believe that vuejs has this level of overhead. My sense was that the mdbootstrap library was responsible for the huge increase in size. I will write a "hello world" vuejs app and check the size. Then I will add the mdbootstrap and check the resultant bundle size.

imyke commented 6 years ago

You could try that, let's see what the bundle size is.

khilliard commented 6 years ago

I built a basic "hello world" app with just vuex, router and axios. Before installing mdbootstrap the production (vendor) bundle is was 118KB. After I added mdbootstrap and imported a collection of basic components (for a navbar) the bundle size increased to 734KB. So it looks like mdbootstrap adds about 600KB to the production bundle size. It's a bit large but I can live with it. I only wonder if mdbootstrap is loading the entire library or only the components that I imported.

imyke commented 6 years ago

Quite possibly. Maybe try to unminify the assets?

khilliard commented 6 years ago

I don't know how to "uniminify". I use the vue cli (webpack) to build the production bundle. However, what I did find out was that the 600KB file size was nearly all due to the fonts that were bundled. For each included font they bundle an true type, eot, woff and woff2 versions. So you have 4 files for each font. I gather that this is done to ensure the maximum compatibility and performance; for example, woff2 encoded fonts compress better.

Mikołaj Smoleński staff commented 6 years ago

We're going to replace fonts files in the next release and it should help. Thanks for all Your remarks. Best regards

khilliard commented 6 years ago

It looks like most of the file size increase is because of the fonts associated with mdbootstrap.

Mikołaj Smoleński staff commented 6 years ago

Thanks for remarks. We'll try to fix it as soon as possible.