Beginner Vue developers please read this #part1
I started learning Vue all the way back to the times of the plague, July of 2020. Since then, I’ve fallen in love with the framework’s simplicity. Fast forward to November of 2020 and I started building my first Vue applications. However, things were rough. The first Vue applications I built had a performance score of around 50% on lighthouse. I couldn’t figure out the problem. I read many stackoverflow posts and reddit threads, but none of them provided me with a satisfactory answer, or one I could understand, tbh. Answers included, “you must use the key property when using v-for”, “your google font is not configured properly”, and the infamous “are you using npm run build or npm run dev”. In fairness, all of these are valid points you must consider before deploying your app; however, I’ve done all of these and my performance scores are still dismal.
Like any beginner developer when hit with a roadblock, I started watching a ton of YouTube videos about the topic and messaging Vue developers on Twitter. One answer that came from an awesome developer, “you must lazy load your views”. Lazy routing? what the heck is that I asked myself. I turned to the Vue documentation for more information. It turns out that the method I was taught to use to handle routing in Vue is inefficient.
before I give you the solution, lets understand the problem.
In a normal HTML page when the user visits the site a request is sent to the server and the server responds with the index.html. Every subsequent routing request, “contact.html”, follows the same pattern. The user requests and the server responds. However, that's not the case in a Vue application, without lazy loading.
In a Vue application when the user visits a website, the server responds with the index.html along with a JavaScript file containing all of our application. That’s right all your web pages including home, contact, about, etc … are sent in one go. This makes your Vue application as snappy as possible, users don't need to wait for sever requests to be resolved to display your contact.html. As soon as the user clicks on it, the page is displayed instantly. However, this makes your app much larger than it needs to be, everything is loaded once from the server, which in turns contributes to the low performance score.
Using the way highlighted above, you can now only serve the homeView of your application on initial page request. All subsequent page requests will be sent to the server and return the requested page. This way will reduce the size of your application instantly and give you much better lighthouse performance scores.
Here is one last proof to drive the point home, in the gif below all routes are lazy loaded except the “destinations page”. You can see in the network tab any page request will send a request to the server except clicking on the destination page.
Thank you for reading and see you in tip number 2, whenever I get the will power to write again :)
