after bundle, vuetify takes 500kb bundle size

Question

I am building for production. npm run build --report .

I am using vue and vuetify.

Looks like after running the above command, I can see that vuetify takes lots of space after bundling.

stat size: 1.05MB
parsed size: 500kb
gziped size: 102kb.

Looks like 500kb is really huge. Why is this happening? how can I lower it ?

I tried using a-la-carte and from 500kb, it got reduced to 360kb. I am not using lots of components, though.

Answer 1

Use the official vuetify loader and let it tree shake and a-la-carte for you. And use webpack or vue-cli-3 to bundle the vuetify code into a separate download.

It might be a bit large, but your users won't regret the extra download size, especially if it needs to happen only the first time in a separate bundle.