Vue Material Design very detrimental effect on Performance

88 Views Asked by At

I am using Vue Material Design Library in my Vue App.

I used Tree Shaking to selectively load used components in my main.js.. Using this package has a blocking effect on my mainThread and causes my TTI in Lighthouse Audit to go up from 3.7 to 6s. This is unacceptable for me..

When performing an additional performance check with Webpack Bundle Analyser and checking Coverage tab in my DevTools, it is clear that Vue Material is the blocking factor.

Has anyone had a similar experience with this library? Is there another way of loading it which results in smaller chunk?

 import { MdField, MdList, MdChips, MdSwitch, MdButton} from 'vue-material/dist/components'
 import 'vue-material/dist/vue-material.min.css'
 Vue.use(MdField);
 Vue.use(MdList);
 Vue.use(MdChips);
 Vue.use(MdButton);
 Vue.use(MdSwitch);
0

There are 0 best solutions below