How to do treeshaking with vuetify?

Question

I have vue application with vuetify.

To have treeshaking in vuetify I need to import in this way: import Vuetify from 'vuetify/lib'; according to the docs.

In my vuetify application, I don't have v-dialog.

When I compile my app code with import Vuetify from 'vuetify' I can see in the dist js bundle - that have vuetify code I which I don't use (like v-dialog, v-dialog--animated).

When I compile with import Vuetify from 'vuetify/lib'; I don't see un-used code (I don't see v-dialog).

But the downside I have to declare each component I want to use.

Is there an easy way to do tree shaking? for example, I expect from vue to search for unused code in the vuetify bundle and remove it.

Answer 1

If you import vuetify from vuetify/lib and use the VuetifyLoaderPlugin it should work.

As the docs suggest you can use a plugin file to setup vuetify, so

// plugins/vuetify.js
import Vuetify from 'vuetify/lib'
import Vue from 'vue'
Vue.use(Vuetify)

export default new Vuetify({/*optional options here*/})

and on the entry file of your application

// main.js
import Vue from 'vue'
import vuetify from './plugins/vuetify'

new Vue({
  vuetify
)}.$mount('#app')

Then you need to make sure that you are using VuetifyLoader. Here is an example config for webpack

// webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  plugins: [
    new VuetifyLoaderPlugin()
  ],
}

source