How to reduce vue js build size with vuetify?

Question

I created a project using vue-cli, added vuetify and vuetify-loader, and the final build size in production mode comes out large, as if all vuetify components were being imported. How to reduce production size?

UPD: I am new to vue js and know little about it so far. I read somewhere that the Vuetify-loader analyzes the components used and connects them to reduce the assembly size, but this does not work for me, even without components the assembly size is high. Here is the output of npm run build:

/  Building for production...

 WARNING  Compiled with 1 warnings                                                                                                                                                                      

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:
  app (472 KiB)
      css/chunk-vendors.bc54f729.css
      js/chunk-vendors.97235f99.js
      js/app.46f6da66.js

  File                                      Size             Gzipped

  dist\js\chunk-vendors.97235f99.js         228.10 KiB       76.89 KiB
  dist\js\app.46f6da66.js                   4.29 KiB         2.05 KiB
  dist\service-worker.js                    1.04 KiB         0.61 KiB
  dist\precache-manifest.9058d5d1f866160    0.76 KiB         0.35 KiB
  7d10739d8c19d6d73.js
  dist\js\about.de05c083.js                 0.40 KiB         0.28 KiB
  dist\css\chunk-vendors.bc54f729.css       239.39 KiB       25.81 KiB

Answer 1

So, the good news is that you are already importing Vuetify in "a la carte" mode. That means that webpack's tree-shaking features are only importing the Vuetify components that you are using. The bad news is that you're probably not going to be able to reduce the bundle size much more than this, but I wouldn't worry too much, just yet.

Unless your app's users are going to be on VERY slow connections (e.g. mobile edge or dialup), they're still likely to see load times of under 1s. Even 3G connections should load in 3-4s. Here's the output from the vue run build command in Vue UI for a project freshly created with the Vue CLI, i.e. vue create myapp followed by vue use vuetify:

The build size warnings from the Vue CLI look scary, but they're mainly looking to get you to pay attention to users who are very slow connections.

For further comparison, if you did NOT use Vuetify in "a la carte" (tree-shaking) mode, your build size for the same project would look like this:

Webpack Bundle Analyzer saved report to /Volumes/ClownCar/bentonmc/dev/playground-vuetify/dist/report.html
  File                                      Size             Gzipped

  dist/js/chunk-vendors.572394a1.js         964.61 KiB       227.31 KiB
  dist/js/app.612913d1.js                   8.41 KiB         3.35 KiB
  dist/service-worker.js                    1.05 KiB         0.61 KiB
  dist/precache-manifest.e297dd70e114a19    0.86 KiB         0.38 KiB
  dd9cc2b302d4a78ec.js
  dist/js/about.7c7cb591.js                 0.44 KiB         0.31 KiB
  dist/css/chunk-vendors.173d6f78.css       35.10 KiB        5.86 KiB

So you can see that already, with tree-shaking enabled, your build size is only one-third of what it would be without it.

It's very good to be concerned about bundle size, and whenever possible you should lazy load components. Users will still have to download the components eventually, but this technique can reduce your main bundle size considerably and allow components not visible on your home page to load in the background.

However, you can't lazy load your app's main layout (i.e. the one that uses <v-app>) and so your bundle size will have to be larger than Vue's recommended target size because of it. It's pretty challenging to build blazing fast, modern web apps AND keep the bundle size down to sizes that work well even on the slowest connections. That said, I believe the benefit of using a framework like Vuetify is totally worth it.

Update: 2020-12-23

I just found a more recent article on Medium with more detail and a lot of great strategies for optimizing your build size and load times. It's definitely worth the read.