Reduce Vue 2 application size
Tags: vue, javascript, webdev
Published: 2020-07-03 17:08:59

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: 
![webpack-bundle-anylazer](https://i.ibb.co/ym2X4mn/Capture.png)
**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](https://webpack.js.org/guides/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](https://gionkunz.github.io/chartist-js/) 😍
after removing ``echarts`` and using ``Chartist.js`` let's generate another report and see the result!

![second-report](https://i.ibb.co/tLzZTXg/report.png)
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](https://bootstrap-vue.js.org/docs/#tree-shaking-with-module-bundlers) 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

![bootstrap-plugin](https://i.ibb.co/kSTn0sn/bootstrap-Plugin.png)

now let's see the result 🙄:

![third-report](https://i.ibb.co/THq3vRR/res2.png)
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 😊

![used-styles](https://i.ibb.co/vXZSGF2/used-bootstrap.png)
**Note:** you can see here I only imported the styles that I use in the application

so, what I remove was: 
![unused-styles](https://i.ibb.co/Wpg51K1/unused-bootstrap.png) 

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

for more details read [Theming Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/theming/)

## 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: 

![login-image-size](https://i.ibb.co/zSCCMpZ/image-size.png)
now, this size is so big, right? 
I used an online tool to compress the image and its called [Compress-Or-Die](https://compress-or-die.com/) so let's see the result
![compressed-img](https://i.ibb.co/FqhWP5y/l-image.png)
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: 
![final-size](https://i.ibb.co/ByD77CY/Capture.png)
the final size is 50% less than the original application, so let's do a little party with the client 😂🎉

finally, I hope you find this article helpful
and if you have any suggestions I will appreciate it so much.
Thank you very much for reading.