Using Nuxtjs, it ships with the webpack bundle analyzer; which helps to give an overview of your bundle. Run the command
nuxt build --analyze
Before
The final bundle size is at 420kb ( Not so bad. But can be improved upon)
Few details caught my attention from the first image
- success.svg
- failed.svg
Taking a further look, I found out those two assets constituted ~108kb.
Damn!!! How did this happen?
As a frontend engineer, I love the idea of being able to manipulate my SVGs, change colours, add some hover effects and so on. In order for me to do this effectively, I have to;
- download the SVG into the project
- make it a Vue component
- import this component everywhere I need it or make it a global component (depending on the use case)
By making it a component, it is more flexible and can be changed based on CSS classes or any logic you'd like to apply. It's all fun when you have to do this for few SVG files but it becomes more of a routine when you have to do this for a large project with lots of SVGs, thus we often tend to use
vue-svg-loader
Due to the ease of use and zero complexity of vue-svg-loader, we tend to abuse it and litter the whole project with it, especially in cases when we can avoid using it.
The idea of using SVG as a component is awesome, but it can take a toll on the bundle size of your project.
Solution:
- Only make SVG a component if that's the last resort, else use
<img />,<picture />tags - Move all assets to the cloud using services such as Cloudinary
Here is the bundle analysis after applying these few steps:
