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

Please provide us some more info. For one, you could provide the output from your npm run build command. I also recommend installing and configuring vue-cli-plugin-webpack-bundle-analyzer. Here's a good article on reducing Vue.js/webpack bundle size. Finally, if you use the build task using the vue ui GUI, it has some good analytical outputs. — morphatic
– morphatic, Commented Apr 26, 2020 at 2:01
@morphatic, I added npm run build output. Vue ui states that vuetify is 1.4 Mb in size. — REI
– REI, Commented Apr 26, 2020 at 16:42

morphatic · Accepted Answer · 2020-12-23 20:37:46Z

16

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.

edited Dec 23, 2020 at 20:37

answered Apr 26, 2020 at 20:22

morphatic

7,9854 gold badges52 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

REI Over a year ago

Thank you very much for your reply. I once used mobile edge and 2g long ago, so I'm worried about build size. Could you tell me the analogue of vuetify, but with a smaller size?

morphatic Over a year ago

I've pretty much only used Vuetify, but there's a list of UI frameworks for Vue on the awesome-vue GitHub repo that would be a good place to start. Of course, you can always build your UI from scratch, but that's a lot of work.

Collectives™ on Stack Overflow

How to reduce vue js build size with vuetify?

1 Answer 1

Update: 2020-12-23

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update: 2020-12-23

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related