0

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?

Improve this question
1
  • Bootstrap 4 minified (with popper.js, jquery and css) is around to 400kb, not 1.6MB. Clearly you are doing something wrong with your config. Seems to be that production mode is not doing the minification of the files. An admin CRUD cannot have a size of 3.8MB after a production build. Could you share your dependencies and the config of vue-cli if you have one? Commented Jul 18, 2019 at 14:58

2 Answers 2

Reset to default
1

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.

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

Comments

1

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.