Topic: Tree Shaking causing bigger js files?!
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. :(
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 5 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 commented 4 years ago
Any news on the treeshaking of animateOnScroll and maybe other that ma not be included yet?
Magdalena Dembna staff premium commented 4 years ago
This issue should be resolved in one of the closest future releases, but unfortunately, I still cannot confirm any date. Best regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.7.0
- Device: Desktop
- Browser: Chrome
- OS: Win.10
- Provided sample code: No
- Provided link: Yes
Magdalena Dembna staff premium commented 5 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?