Tree Shaking causing bigger js files?!


Topic: Tree Shaking causing bigger js files?!

digitalmanagerguru pro premium asked 2 years ago

Here is a comparison

npm run prod - Without Tree Shaking

checkout app v4 - 1.41Mb
app v4 - 1.75Mb
vendor - 3.25Mb

npm run prod - With Tree Shaking

checkout app v4 - 1.16Mb
app v4 -2.71Mb
vendor - 3.25 Mb

So, this was causing bigger files. Documentation says "Using this mode will significantly reduce the size of js output files.": https://mdbootstrap.com/docs/vue/getting-started/quick-start/#tree-shaking But thats not what I get in reality as we can see in my results.

I applied the tree shaking to solved this issue too: https://mdbootstrap.com/support/vue/chartjs-error-when-im-not-even-using-it-in-my-project/

But without success. I thought that with tree shaking, only the components I am loading would be in the JS file, but ChartJS is being loaded and I am not using it at all. :(


Magdalena Dembna staff premium commented 2 years ago

To use this treeshaking option you need to make sure that nowhere in your app components are imported directly from 'mdbvue'. If any of them are, the entire library will be included, as well as single files - so the result would in fact, bigger. How many mdb components are you using in your application? I have tested several components and each time the result is lighter. What is your project's configuration?


digitalmanagerguru pro premium answered 2 years ago

My stack is Laravel + Vue + Mdb.

I beleive I changed everywhere, but maybe I forgot one. Need to check it carefully.

I am using mdbBtn, mdbBtnFixed, mdbBtnFixedItem, mdbDatePicker, mdbIcon, mdbInput, mdbModal, mdbProgress, mdbSelect, mdbSpinner, mdbTbl, mdbTooltip, mdbSelectInput, mdbSelectOptions, mdbSelectOption, mdbClickOutside, mdbSideNav, mdbSideNavCat, mdbSideNavNav, mdbSideNavItem, waves, classNames, animateOnScroll, mdbDropdown, mdbDropdownItem, mdbDropdownMenu, mdbDropdownToggle, mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbRow, mdbCol, mdbCard, mdbCardBody, Notify

The only thing that I've on app.js that could be the culprit is:

import Notify from 'mdbvue/lib/components/Notify';
Vue.use(Notify);

In all my components I've this kind of code:

  import mdbBtnFixedItem from 'mdbvue/lib/components/mdbBtnFixedItem';

  export default {
    inheritAttrs: false,
    name:"CustomMdbBtnFixedItem",
    components: {
      mdbBtnFixedItem,
    },

Any more idea why this wouldnt work? How to load directives and mixins? Same way right?


Magdalena Dembna staff premium commented 2 years ago

Generally, all the mixins and directives should be imported the same way, f.e. import mdbTouch from 'mdbvue/lib/components/mdbTouch';. While inspecting your case I've found out that one of the directives (animateOnScroll) is not included in treeshaking - that's the first thing which could cause the increased size - we will test it and try to improve this feature. Best regards, Magdalena


digitalmanagerguru pro premium commented a year ago

Any news on the treeshaking of animateOnScroll and maybe other that ma not be included yet?


Magdalena Dembna staff premium commented a year ago

This issue should be resolved in one of the closest future releases, but unfortunately, I still cannot confirm any date. Best regards, Magdalena


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.7.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: Yes