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

Answer 2

Do you use the Vue CLI? If not, I would suggest to do so. You just need few commands:

Install Vue CLI

npm install -g @vue/cli

This will globally install the Vue CLI (you'll maybe need administrator privileges) For more information see: Installation|Vue CLI

Create you App

vue create my-app

This will setup your project for Vue.js and ask you some question. You can use the default set. After that you must change into the projects directory.

cd my-app

Install Vuetify

vue add vuetify

This will install the Vuetify framework. You can use the default settings. After that you've a project setup with Vue.js + Vuetify. Also the default setting is to use tree-shaking, while building the app at the end.

For more details, I have an example here, which also includes Electron at the end. But the steps up to conifguration of Vuetify are the same. With this setup, you automatically have tree shaking.