Home » vue » optimize build size vuejs

optimize build size vuejs

Posted by: admin November 26, 2021 Leave a comment

Questions:

When I build the production build, the size of the css+js is going up to 3.8MB.

The only thing I could see is bootstrap which is taking half of the size amongst 3.8MB.

The app contains CRUD functionality in admin module where I have used bootstrap mostly and the other module is a list of static pages wherein I have used only grid of bootstrap.

stats after production build

Kindly guide on How can I make improvement in optimizing this further?

Answers:

This is expected and using bootstrap and there’s nothing you can do. If you had, instead, used bootstrap-vue you could import only the specific parts of the modules that you need (javascript) and that would significantly reduce the size of your bundle.

With that said, there’s nothing wrong here. The gzip size of these is 252kb at maximum and that’s quite cheap.

If you serve your site using http2 and the browser supports it, your request will be multiplexed and will use TCP pipelines to load the assets. This has huge gains and improvements over HTTP1 in that:

  • the connection to your server is opened through a TCP socket
  • the TCP socket then balances the requests by using Frames (which are asynchronous) vs http1 which is synchronous and could only manage 2 synchronous HTTPD threads at a time
  • the pipeline does not wait for assets and continues to cascade requests for assets, which improves the page load vastly.

So to summarize – serve your assets gzipped and make sure your web server uses http2 and your issue is trivial at this time.

###

Consider using purgecss plugin to get rid of all unused bootstrap classes: https://www.purgecss.com/guides/vue