TreeShaking using webpack

[jetsmart]

Hi!
I create App with Nuxt, and using nuxt build for building bundle.

1. install Quasar into project: vue add quasar
2. add code into app

import Vue from 'vue'
import '../../assets/stylus/quasar.styl'
import '@quasar/extras/material-icons/material-icons.css'
import {default as Quasar} from 'quasar'
import {
  QBtn
} from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: {
    QBtn,
  },
  directives: {
  },
  plugins: {
  }
})

3. create bundle npm run build
4. analyze bundle and see, that all quasar components is included, however i use unly one QBtn.

How can i minimize bundle size by treeshaking?

[Hawkeye64]

Make sure your in your quasar.conf.js that framework.components is not set to all. This is where you add the components you are using and quasar will do the treeshaking for you.

[jetsmart]

@Hawkeye64
I dont use quasar-cli. For project building i use webpack (ver. 4.33) itself (npm run build).

"scripts": {
    "build": "webpack --mode=production --devtool source-map --progress"
}

TreeShaking works perfectly with simple test modules, as described in manual https://webpack.js.org/guides/tree-shaking, but wont with Quasar.

I try remove import {default as Quasar} from 'quasar' then bundle size decreases, and contain only QBtn.

!(https://ibb.co/1mnVkXD)

Exactly import {default as Quasar} pulls along all quasar components.

!(https://ibb.co/3Y4XJJQ)

[metalsadman]

coz default installs all quasar options. you can see it if you print it in the logs.

[Hawkeye64]

I would think that import {default as Quasar} from 'quasar' would bring in exactly everything.
Why not be specific, import {QBtn} from 'quasar'?