tree-shaking & optimizing

  • I’m taking a peek into the css and js in the dist folder and I took an example component that I am not using, the carousel and did a search and I find some carousel things in vendor.js and the app css.

    I am importing things individually for example: import { QBtn } from ‘quasar’

    The carousel mentions in vendor.js are all things like: staticClass:“q-carousel-inner” except for name:“q-carousel”

    and there are 24 matches to the word “carousel” in the app css.

    purifyCSS is still set to true and the rest of the config is at its default I believe.

    Should I expect to see mentions of unused components like that in those dist files with tree shaking or should they have been removed entirely?

  • I’m experiencing some issues like this. My vendor.js can get as big as 1.2 mb after minification, which I think is too much given the fact that I’m not using any heavy component like the mentioned carousel or any datatable, and I’m also importing things individually (quasar 0.14 forces you to do this way).
    Any hints?

  • Thanks for the response. I’m not seeing numbers that high as of yet, I’m at 414 KB & 185 KB on the css. Most of my other js files are under 10KB. I’m looking for the smallest files possible. If those things mentioned above ( and perhaps some other things ) should have been “shaken” out I’d love to be sure I do what is required for it to happen. I do have an external slider in my build as well which has a large foot print and I may remove it and do something custom, so I think the quasar related js is closer to the 300KB range and the slider has 21 KB of un-minified CSS that gets required in. Anyway, I’d appreciate hearing if there is more I can do to help the shaking.

Log in to reply