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
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 😂🎉
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.
Top comments (2)
Thank you very much, very helpful.
nice work
thanks for information