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.
Kindly guide on How can I make improvement in optimizing this further?
This is expected and using
bootstrap and there’s nothing you can do. If you had, instead, used
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