Reduce Vue 2 application size

Mahmood Abbas — Fri, 03 Jul 2020 17:08:59 +0000

before a few days, one of my clients has an application built with vue.js, so the application was working well, and we can say everything was ok, but there was a big issue for my client The Size Of The application because we have a slow internet speed (15kb/s - 50kb/s), and the size of the application was more than 1.2mb.

so he wanted me to reduce the application size, and in this article, I will talk about what I did to reduce the size.

1 - generate a report about the application bundle

to understand what makes bundle size bigger than expected
I needed to generate a report about the application to provide a visual guide to the size of each package in the bundle, so I can check if there is any package that has a big size and I can replace it.

fortunately, Vue-Cli offers a lot of commands that can help us in this situation, one of them is build --report command, this command will build a report for the application using Webpack-bundle-analyzer
and to use it, open package.json and in the scripts add

"build-report": "vue-cli-service build --report"

then run npm run build-report 🙆‍♂️

after process end, a report.html file will be created inside the dist folder, open the file in the browser and you will see something like this:

Note: from the Webpack-bundle-analyzer menu we can see the size of the application, my application size is stat size: 5.17mb, parsed: 1.57mb, gzipped: 500kb

2 - reduce the bundle size

from the report, we can see every package in the bundle and how much size it's added to the bundle and we can see that the packages with big size in the application are:

echarts (stat size: 2.7mb, parsed: 814kb, gzipped: 270.7kb)
bootstrap-vue (stat size: 772kb, parsed: 297kb, gzipped: 69kb)

Reduce the size of echarts

we can see that echarts has a big size 😫

now to reduce the size of the bundle we should:

use another package with a smaller size
reduce the package size with tree-shaking

now in my situation, I should use another package because I only need a pie & line chart and it's better to me to find a smaller package 😅, so the best alternative to me is Chartist.js 😍
after removing echarts and using Chartist.js let's generate another report and see the result!

the application size now is stat size: 2.35mb, parsed: 819kb, gzipped: 240kb
it's a big change for now 🎉

Reduce the size of Bootstrap-Vue
I know bootstrap-vue it's not too big, but we can remove unused components to get better performance and size.
if we go to the bootstrap-vue docs we can see it supports tree-shaking 🎉
but only applies to the JavaScript code and not CSS/SCSS so in this method we will remove unused js code only 😥

now, what I need to do is check what is the components that I used in the application, and Import it like this

now let's see the result 🙄:

the application size now is stat size: 2mb, parsed: 700kb, gzipped: 200kb
it's not a big change but hey, we removed unused code and make the bundle size smaller (40kb smaller than before) 😅

3 - Remove unused CSS

what I did before is only reduce the Javascript bundle size, that means remove unused Javascript code form the bundle, and now I want to remove unused CSS from the application 😉

maybe you are saying this step is unnecessary, CSS will never be a problem for my application 🤷‍♂️

but no, if you care about your application performance, you shouldn't say that because reducing file sizes is good for performance 🐱‍🏍.

you can use tools like Purge-CSS to make this step easier, but you should know that Purge-CSS will remove used CSS in sometimes too 🙆‍♂️

so because I'm using bootstrap and Unfortunately, Purge-CSS doesn't play well with bootstrap-vue I can't use Purge-CSS 🤕

What Should I Do?
you can use SCSS version of bootstrap and only import the styles that you need 😊

Note: you can see here I only imported the styles that I use in the application

so, what I remove was:

a lot of unused styles has been remove and this a big change for the application performance 🎉

for more details read Theming Bootstrap

4 - compress images to improve loading time

now, only what we need to do in this step is compressing the images that we are using to improve the loading time
so in my case, I have only one image in the login page and the size of it is:

now, this size is so big, right?
I used an online tool to compress the image and its called Compress-Or-Die so let's see the result

that was a big change in the size of the image 😁

Conclusion

in the beginning, the application size was bigger than 1mb and this size includes the images and fonts, my goal was to reduce the bundle size and after I reduce it the final size was:

the final size is 50% less than the original application, so let's do a little party with the client 😂🎉