Search code examples
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).

    • vuetify/lib/framework exports a Vuetify Class, which is the framework that handles all your vuetify magic.

    • vuetify/lib exports the same Vuetify Class, but also all components, directives, and predefined colors as named exports for easy access, leading to a larger bundle in development.

    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.