Asked By: Anonymous
What is the difference between the following imports for
import Vuetify from 'vuetify/lib/framework';
import Vuetify from 'vuetify/lib';
With method A the Vuetify bundle has a size of 1.12MB (development):
With method B it has a size of 1.79MB (development):
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.
Answered By: Anonymous
You can check for yourself in your node_modules folder (if you use npm).
vuetify/lib/frameworkexports a Vuetify Class, which is the framework that handles all your vuetify magic.
vuetify/libexports 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.