Lazy Loading Components in Vue.js
By: John Philip
Tags: JavaScript, Performance, Vuejs, Vue, Web Performance

Optimizing performance in Vue.js application is a very important factor to consider. An application with a higher performance score will ensure that users get the best of user experience.

It will also ensure the efficiency of the application itself.

What is Lazy Loading?

Lazy loading ensures that the components attached with the lazy load syntax are not loaded until they become visible.

Lazy loading as the name suggests is one of the best ways to improve performance of Vue.js application.

It is considered a good practice to lazy load components with:

Toggled content

Side panels

Tabs

Components which aren’t available or visible on initial page load

Modals

Dynamic import of Components

We can load components dynamically which means that all the components available will all be downloaded regardless of the ones that aren’t needed on initial page load. This can affect our application performance.

To dynamically import components, we use the native dynamic import syntax as shown below.

The code snippet below will dynamically import the photos component.

// dynamically import photos component

import Photos from “@/components/photos;”;

Lazy Loading of Components

To lazy load a component, we use the variable “const” based and attach an arrow function followed with the dynamic import syntax.

How do we lazy load components?

To apply lazy loading to Vue.js components we need to change the default import of components to variable “ const” based components as shown below.

See the example below.



// lazy-loaded component

const Photos = () => import(/* webpackChunkName: “Photos” */ “@/components/photos”);



Do you see the commented Webpack’s chunk name?.

The name provided in the commented Webpack’s chunk name will tell Webpack the name we want to assign to the chunk. Otherwise when not provided Webpack will auto generate a name for the chunk.

This may be of importance when you are doing bundle analyzing.

Webpack’s magic comments are special phrases that are affecting build process when used in a comment. One of such magic comments is /* webpackChunkName: "component"*/ . Simply put this comment inside dynamic import function and your resource will be prefetched: by Marku Oberlehner.

Lazy loading can be a huge boost for your Vue.js applications when you want to better the loading performance of your application.

Also to keep in consideration that it has its disadvantages too. Lazy loading should be implemented carefully and only to load components that are of less importance like we have seen above.

It is also of importance to lazy load components that are of much bigger size in our applications.

Conclusion

Just to recap that we have seen the two different ways to import components and the best practice to better performance of Vue.js application.

We have also seen that lazy load has its downside too. It is of much importance to lazy load only components that are not necessarily needed when the page renders or are of much weight to our application.

Thank you for reading through this article. If you found this piece helpful please do not hesitate to share it out.