SoFunction
Updated on 2025-04-04

Operation code for lazy loading of Vue components

In today’s fast-paced digital world, website performance is critical to attracting users and achieving success. However, for pages like the home page, optimizing performance without affecting the functionality becomes a challenge.

This is where the lazy loading of Vue components comes in. By deferring the loading of non-essential elements until visible, developers can enhance the user experience while ensuring fast loading of login pages.

Lazy loading is a technique that prioritizes the loading of key content while delaying loading secondary elements. This method not only shortens the initial loading time of the page, but also saves network resources, making the user interface lighter and more responsive.

In this article, I will show you a simple mechanism usingIntersection Observer APILazy loading of Vue components when they are visible.

Intersection Observer API

The Intersection Observer API is a powerful tool that allows developers to effectively track and respond to changes in element visibility in the browser's viewport.

It provides a method to asynchronously observe the intersection between an element and its parent element or between an element and a viewport. It provides a superior performance optimization solution for detecting when elements are visible or hidden, reducing the need for inefficient scrolling event listeners, enabling developers to selectively load or manipulate content when necessary, thereby enhancing the user experience.

It is often used to implement features such as infinite scrolling and lazy image loading.

Asynchronous Components

Vue 3 providesdefineAsyncComponent, used to load components asynchronously only if needed.

It returns a component defined promise:

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})

It can also handle errors and loading states:

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./'),
  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

When the component is visible, we will use this feature to load the component asynchronously.

Lazy loading components

Now, let's combine the Intersection Observer API withdefineAsyncComponentFunctions, load them asynchronously when the components are visible:

import {
  h,
  defineAsyncComponent,
  defineComponent,
  ref,
  onMounted,
  AsyncComponentLoader,
  Component,
} from 'vue';
type ComponentResolver = (component: Component) => void
export const lazyLoadComponentIfVisible = ({
  componentLoader,
  loadingComponent,
  errorComponent,
  delay,
  timeout
}: {
  componentLoader: AsyncComponentLoader;
  loadingComponent: Component;
  errorComponent?: Component;
  delay?: number;
  timeout?: number;
}) => {
  let resolveComponent: ComponentResolver;
  return defineAsyncComponent({
    // the loader function
    loader: () => {
      return new Promise((resolve) => {
        // We assign the resolve function to a variable
        // that we can call later inside the loadingComponent 
        // when the component becomes visible
        resolveComponent = resolve as ComponentResolver;
      });
    },
    // A component to use while the async component is loading
    loadingComponent: defineComponent({
      setup() {
        // We create a ref to the root element of 
        // the loading component
        const elRef = ref();
        async function loadComponent() {
            // `resolveComponent()` receives the
            // the result of the dynamic `import()`
            // that is returned from `componentLoader()`
            const component = await componentLoader()
            resolveComponent(component)
        }
        onMounted(async() => {
          // We immediately load the component if
          // IntersectionObserver is not supported
          if (!('IntersectionObserver' in window)) {
            await loadComponent();
            return;
          }
          const observer = new IntersectionObserver((entries) => {
            if (!entries[0].isIntersecting) {
              return;
            }
            // We cleanup the observer when the 
            // component is not visible anymore
            ();
            await loadComponent();
          });
          // We observe the root of the
          // mounted loading component to detect
          // when it becomes visible
          ();
        });
        return () => {
          return h('div', { ref: elRef }, loadingComponent);
        };
      },
    }),
    // Delay before showing the loading component. Default: 200ms.
    delay,
    // A component to use if the load fails
    errorComponent,
    // The error component will be displayed if a timeout is
    // provided and exceeded. Default: Infinity.
    timeout,
  });
};

Let's break down the above code:

Let's create alazyLoadComponentIfVisibleFunction, this function accepts the following parameters:

  • componentLoader: Returns a function that resolves to a component defined Promise
  • loadingComponent: Components used when asynchronous component loading.
  • errorComponent: Components used when loading fails.
  • delay: Shows the delay before loading the component. Default value: 200 milliseconds.
  • timeout: If a timeout is provided, the error component will be displayed. default value:Infinity。

Function returndefineAsyncComponent, which contains the logic to load the component asynchronously when it is visible.

The main logic happens indefineAsyncComponentInternalloadingComponentmiddle:

We usedefineComponentCreate a new component that contains a rendering function for passing tolazyLoadComponentIfVisibleofdivRenderingloadingComponent. The rendering function contains a template pointing to the root element of the loading componentref。

existonMountedIn, we will checkIntersectionObserverWhether it is supported. If not supported, we will load the component immediately. Otherwise, we will create aIntersectionObserver, used to observe the root element of the loaded component to detect when it becomes visible. When the component becomes visible, we clean up the observer and load the component.

Now you can use this function to lazy load the component when it is visible:

<script setup lang="ts">
import Loading from './components/';
import { lazyLoadComponentIfVisible } from './utils';
const LazyLoaded = lazyLoadComponentIfVisible({
  componentLoader: () => import('./components/'),
  loadingComponent: Loading,
});
</script>
<template>
  <LazyLoaded />
</template>

Summarize

In this article, we learned how to use the Intersection Observer API anddefineAsyncComponentFunctions lazy load Vue components when they are visible. This is useful if you have a homepage with many components and want to improve the initial loading time of your application.

This is the end of this article about lazy loading of Vue components. For more related content about lazy loading of Vue components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!