Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: vuejs bundle size

khilliard free asked 5 years ago


I did a production build of my vuejs app. The "vendors" file was over 2MB. I only import the mdb components that I use. How can I reduce the bundle size?


Mikołaj Smoleński staff answered 5 years ago


Thanks for reporting the issue. We'll check bundle size and try to reduce it with one of the next releases.

Best regards


khilliard free commented 5 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 5 years ago

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


imyke free answered 5 years ago


I think webpack has already done the best it can. No further reduction is really necessary when you consider the other dependencies.


khilliard free commented 5 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 free commented 5 years ago

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


khilliard free commented 5 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 free commented 5 years ago

Quite possibly. Maybe try to unminify the assets?


khilliard free commented 5 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 5 years ago

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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.3.0
  • Device: pc desktop
  • Browser: chrome, edge
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No