Lazy Loading Components in VueJS - Coding

Lazy Loading, fundamentally, is a design principle that delays the initialization of an object or a resource until the point at which it is genuinely required. The purpose of lazy loading is to postpone downloading parts of the application that are not needed by the user on the initial page load which ends up in much better loading time.

As a app scales, the compiled JavaScript bundle file will keeps on increasing and thus affect the page load time. With the help of the defineAsyncComponent method, we can only load a component if and when needed.

Setting Up the Project Environment

Step 1: Create a Vue.js application

npm create vue@latest

Step 2: Navigate to your project directory and install dependencies

cd your-project-name && npm install

Project Structure:

Project Structure

Example: Lazy Loading a Component, We can use the new defineAsyncComponent function. We need to do is pass a function that loads the components. As we are loading the GFG component later there may be a short delay while the lazy-loaded part of UI is being requested and rendered for that pass in a loading component property which will be displayed while the component is being loaded.

JavaScript

<script setup>
    // lazy load the component
    import Loading from './components/Loading.vue'
    import { defineAsyncComponent } from 'vue';
    import { ref } from 'vue';
    const GFG = defineAsyncComponent({
        loader: () => import('./components/GFG.vue'),
        loadingComponent: Loading
    });
    const show = ref(false);
    const toggle = () => show.value = !show.value;
</script>

<template>
    <div>
        <button @click="toggle">Toggle</button>
        <GFG v-if="show" />
    </div>
</template>

JavaScript

<!-- GFG.vue -->
<template>
    <!-- a centered align image -->
    <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg" 
         alt="GeeksforGeeks"
         style="display: block;
                margin-left: auto;
                margin-right: auto;">
</template>

JavaScript

<!-- Loading.vue -->

<template>
    <div class="loading">
        <div class="loading__spinner"></div>
    </div>
</template>
<style>
    .loading {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .loading__spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #2f8d46;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

Output:

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to use the DayJS Library to work with Date & Time in JavaScript?
JavaScript Program to Remove Empty Strings from Array Without Loop
How to Compare Objects for Equality in JavaScript?
Math Sprint Game in VueJS
Compute the Bitwise AND of all Numbers in a Range using JavaScript

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17