vue.jswebpackvuetify.jstree-shaking

Vuetify: Difference between import 'vuetify/lib/framework' vs 'vuetify/lib'


What is the difference between the following imports for Vuetify:

Method A:

import Vuetify from 'vuetify/lib/framework';

Method B:

import Vuetify from 'vuetify/lib';

With method A the Vuetify bundle has a size of 1.12MB (development):

enter image description here

With method B it has a size of 1.79MB (development):

enter image description here

For production the bundle size is the same.

My guess is, that with with method A Vuetify is already doing tree-shaking on the development run, while for method B tree-shaking appears only in production build.


Solution

  • You can check for yourself in your node_modules folder (if you use npm).

    As you see in your own result, it really doesn't matter for production due to treeshaking. But, if you're customizing your installation, it's easier to do a single import from vuetify/lib for Vuetify and all other related components, than having separate imports and paths for colors, components, and directives.