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: Does the Vue Pro version allow me to select individual modules?

moofly free asked 5 years ago


I'm super impressed with mdboostrap, and I'm seriously considering using the Pro version with products going forward.

One thing that would concern me is the size of the vue bundle even after webpack has done its treeshaking. I notice that the free version includes 'chartjs' and 'moment', neither of which I would use. Is there a way to remove them from the final build if I were to buy Pro? They take up nearly half of the bundle.

Simply importing the css in main.js and then adding the following code in one of my components means chartjs and 'moment' are included in the final build:

import { mdbInput, mdbBtn }  from 'mdbvue';

Any ideas? I'd really like to buy your product.


Magdalena Dembna staff answered 5 years ago


Unfortunately, the answer is no. However, we are currently discussing optimizing our package's size. Besides, the upcoming Vue version is supposed to introduce major changes in that area, so I hope that in the future we will be able to reduce our package's size. Kind regards, Magdalena


moofly free answered 5 years ago


Ok no worries. I've bought the product and I'll see if I can use webpack's 'resolve' to remove it, or failing that, I'll remove it manually.

Update: For anyone looking to slim down mdbootstrap then I found the best method was to modify my vue.config.js and add something similar to the module.export - obviously only remove stuff that isn't used in any components that you need.

configureWebpack: {
    externals: {
        'popper.js': {
            root: 'PopperJS',
            commonjs2: 'popper.js',
            commonjs: 'popper.js',
            amd: 'popper.js',
          },
        'moment': 'moment',
        'chart.js': 'chart.js',
    }
}

I also commented out cards, chat, date pickers and tooltips from mdbvue's index.js too. This got my vendor.js bundle down to 106KB gzipped, and my entire js payload including my app itself under the 130KB magic number.


Magdalena Dembna staff commented 5 years ago

If you're interested you can follow changes in our package here: https://mdbootstrap.com/docs/vue/changelog/ or subscribe to a newsletter. As soon as something changes in this area, we will include it in the changelog.



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.6.0
  • Device: Development
  • Browser: N/A
  • OS: Vue CLI / Webpack
  • Provided sample code: No
  • Provided link: No