Speed Up Your Vue.js Single-Page App
Speed Up Your Vue.js Single-Page App
Increase the performance of Vue.js applications by focusing on lazy-load components and routes and functional components.
Join the DZone community and get the full member experience.Join For Free
One of my projects included building a Single Page Application with Vue.js. As the Go Live approached, the topic of performance optimization became more relevant. In this article, I have collected everything I have learned about improving the performance of Vue.js applications with regards to loading times and rendering performance.
It is important to note that these three files will be loaded once the user visits the SPA and only afterward will the page is rendered. However, most of the files contents is not even needed for the initially loaded page and should not block the user from using our website as quickly as possible.
The following article presents several approaches on how you can mitigate this issue and further approaches to improve your Vue.js application in terms of responsiveness and performance.
Functional components are components that hold no state and no instance. Turning your stateless Vue component into a functional component can drastically increase your rendering performance.
Simply add the
functional keyword to the top-level
To access your props and data as before, you have to make some minor adjustments.
In case you are using i18n for internalization, you have to prepend parent to $t:
With functional components, we do not have access to methods or computed props. However, we can still access methods using
Lazy loading components can save a lot of time on initial download. Any lazily loaded resource is downloaded when it’s
import() function is invoked. In the case of Vue components that happens only when it is requested to render. Dialogues are predestined for this. They are usually shown only after user interaction.
Webpack will create a separate chunk for the ModalDialog component, which will not be downloaded immediately on page load but only once it is needed.
Be careful not to lazy-load a component that should be shown automatically. For example, the following would (silently) fail to load the modal dialog.
The reason is that the mounted hook is evaluated before the modal component is lazy loaded.
It is very easy to define an async component that will be automatically code-split by Webpack. Just change the import statement:
Apart from that, nothing needs to change in the route configuration. Build your app in production mode with:
and verify that a lot of chunks will be generated
A very cool feature is that Vue automatically adds magic comments for Webpack so that further chunks will be prefetched automatically (see prefetch cache). However, prefetching will only start after the browser has finished the initial load and becomes idle.
Make Object Lists Immutable
Usually, we will fetch a list of objects from a backend, for example users, items, articles, etc. By default, Vue makes every first-level property for each object in the array reactive. That can be expensive for large arrays of objects. Sometimes, we do not need to modify them when we just want to display objects.
So, in these cases, we can gain some performance if we prevent Vue from making the list reactive. We can do that by using
Object.freeze on the list, e.g. making it immutable.
Measure Runtime Performance
We have talked about quite a few ways to improve a Vue SPA, but we do not know how much performance we actually have gained. We can do so by using the Performance tab in our browser’s Developer Tools.
In order to have accurate data, we have to activate the performance mode in our Vue app. Let us activate it for developer mode in our main.ts file with
This activates the User Timing API that Vue uses internally to measure component performance.
Open your browser and press F12 to open the Developer Console. Switch to the Performance tab and click Start Profiling. In Chrome, the Timings row shows important marks, such as the Time of First Contentful Paint and First Meaningful Paint. These are measures you should try to decrease so that your users can use the website as fast as possible.
Do you have more tips and tricks to improve the performance of Vue.js applications? Let me know in the comments!
In this part, we have seen how we can use lazy-loading for routes and components to split our SPA into chunks, how functional components can improve the performance, and how we can measure these improvements.
Published at DZone with permission of Dr. Matthias Sommer . See the original article here.
Opinions expressed by DZone contributors are their own.