Detailed explanation of how to implement lazy loading components in Vue3

introduction

With the development of modern front-end frameworks, lazy loading, as an excellent performance optimization technology, plays an increasingly important role in user experience and loading speed. Vue 3 provides asynchronous component functionality that makes it extremely easy to implement lazy loading of components in applications. This article will explain in detail how to implement lazy loading components in Vue 3 to ensure you can apply this technology to your own projects.

What is lazy loading?

Lazy Loading is a design pattern that delays loading resources (such as components, images, etc.) until they are needed. This method can effectively improve the first loading speed of the page, reduce unnecessary downloads, and thus enhance the user experience.

Asynchronous Components of Vue 3

In Vue 3, lazy loading can be easily achieved by defining asynchronous components. Asynchronous components are components that are loaded when needed, rather than loading them all when the application starts. Vue 3 useddefineAsyncComponentAPIs to simplify this process.

Basic syntax

usedefineAsyncComponentWe can define an asynchronous component, and the following is its basic syntax:

import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/')
)

How to implement lazy loading components in Vue 3

Create a Vue project

First, make sure you have Vue CLI installed. If you have not installed it, you can use the following command to install it globally:

npm install -g @vue/cli

Next, you can create a new Vue 3 project with the following command:

vue create my-vue-app
cd my-vue-app

During the creation process, select Vue 3 Configuration.

Add asynchronous components

Can be insrc/componentsCreate a new component in the directoryand add some simple content.

<template>
  <div>
    <h2>Lazy loading components</h2>
    <p>This is a component that is loaded when needed！</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

Next, we will lazy load this in the main component.MyComponent. existsrc/The following modifications are made to the file:

<template>
  <div >
    <h1>Welcome to mine Vue 3 application</h1>
    <button @click="loadComponent">Load lazy loading components</button>
    <component v-if="isComponentVisible" :is="AsyncComponent"></component>
  </div>
</template>

<script>
import { defineComponent, ref, defineAsyncComponent } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const isComponentVisible = ref(false)

    const AsyncComponent = defineAsyncComponent(() =>
      import('./components/')
    )

    const loadComponent = () => {
       = true
    }

    return {
      isComponentVisible,
      AsyncComponent,
      loadComponent
    }
  }
})
</script>

<style>
#app {
  text-align: center;
}
button {
  margin: 20px;
}
</style>

Code Analysis

1. Status Management：

   • userefto manage the visibility of components, i.e.isComponentVisible, initially set tofalse。

2. Define asynchronous components：

   • usedefineAsyncComponentTo define asynchronously loaded componentsAsyncComponent。

3. Loading components：

   • When the button is clicked,loadComponentThe function will be executed and changedisComponentVisibleThe value oftrue, thereby triggering the loading of the asynchronous component.

4. Template syntax：

   • usev-ifDirective to control whether to render asynchronous components. whenisComponentVisiblefortrueThe component will be loaded only when it is loaded.

Add loading status

To improve the user experience, a loading status can be displayed when the component is loaded. We can useloadingOptions to display the prompt information in loading.

rightAsyncComponentProcessing the following upgrades:

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/'),
  loadingComponent: {
    template: `<div>loading...</div>`
  },
  errorComponent: {
    template: `<div>Loading failed，Please try again later。</div>`
  },
  delay: 200,  // Delay display of loading component time  timeout: 3000 // Timeout setting})

In this example, we define a simple loading component and error component. passdelayandtimeoutTo control the behavior of loading prompts.

Summarize

Through the above steps, we successfully implemented lazy loading components in Vue 3. This approach not only improves the performance of the application, but also optimizes the user's experience, allowing them to load components when they need it.

Lazy loading components is an integral part of modern front-end development, and by using Vue 3’s asynchronous component API, you can easily incorporate this technology into your application. In actual projects, using lazy loading rationally according to user usage habits and component complexity can bring significant performance improvements.

Hopefully this article provides a clear direction for you to use lazy loading components in Vue 3. If you have more questions or want to know more about other features of Vue, feel free to communicate!

The above is a detailed explanation of how to implement lazy loading components in Vue3. For more information about lazy loading components in Vue3, please follow my other related articles!