首页 > 其他分享 >Vue组件懒加载

Vue组件懒加载

时间:2023-09-20 22:33:50浏览次数:43  
标签:Vue const loadingComponent defineAsyncComponent component 组件 加载

在当今快节奏的数字世界中,网站性能对于吸引用户和取得成功至关重要。然而,对于像首页这样的页面,在不影响功能的前提下优化性能就成了一项挑战。

这就是 Vue 组件懒加载的用武之地。通过将非必要元素的加载推迟到可见时进行,开发人员可以增强用户体验,同时确保登陆页面的快速加载。

懒加载是一种优先加载关键内容,同时推迟加载次要元素的技术。这种方法不仅能缩短页面的初始加载时间,还能节约网络资源,从而使用户界面更轻量、反应更灵敏。

在本文中,我将向你展示一种简单的机制,使用 Intersection Observer API 在 Vue 组件可见时对其进行懒加载。

Intersection Observer API

Intersection Observer API 是一种功能强大的工具,它允许开发人员有效地跟踪和响应浏览器视口中元素可见性的变化。

它提供了一种异步观察元素与其父元素之间或元素与视口之间交集的方法。它为检测元素何时可见或隐藏提供了性能优越的优化解决方案,减少了对低效滚动事件监听器的需求,使开发人员能够在必要时有选择地加载或操作内容,从而增强用户体验。

它通常用于实现诸如无限滚动和图片懒加载等功能。

异步组件

Vue 3 提供了 defineAsyncComponent,用于仅在需要时异步加载组件。

它返回一个组件定义的 Promise:

import { defineAsyncComponent } from 'vue'

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

还可以处理错误和加载状态:

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),

  // 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
})

当组件可见时,我们将使用该功能异步加载组件。

懒加载组件

现在,让我们结合 Intersection Observer API 和 defineAsyncComponent 函数,在组件可见时异步加载它们:

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
            observer.unobserve(elRef.value);
            await loadComponent();
          });

          // We observe the root of the
          // mounted loading component to detect
          // when it becomes visible
          observer.observe(elRef.value);
        });

        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,
  });
};

让我们分解一下上面的代码:

我们创建一个 lazyLoadComponentIfVisible 函数,该函数接受以下参数:

  • componentLoader:返回一个解析为组件定义的 Promise 的函数
  • loadingComponent:异步组件加载时使用的组件。
  • errorComponent:加载失败时使用的组件。
  • delay:显示加载组件前的延迟。默认值:200 毫秒。
  • timeout:如果提供了超时时间,则将显示错误组件。默认值:Infinity

函数返回 defineAsyncComponent,其中包含在组件可见时异步加载组件的逻辑。

主要逻辑发生在 defineAsyncComponent 内部的 loadingComponent 中:

我们使用 defineComponent 创建一个新组件,该组件包含一个渲染函数,用于在传递给 lazyLoadComponentIfVisiblediv 中渲染 loadingComponent。该渲染函数包含一个指向加载组件根元素的模板ref

onMounted 中,我们会检查 IntersectionObserver 是否受支持。如果不支持,我们将立即加载组件。否则,我们将创建一个 IntersectionObserver,用于观察已加载组件的根元素,以检测它何时变得可见。当组件变为可见时,我们会清理观察者并加载组件。

现在,你可以使用该函数在组件可见时对其进行懒加载:

<script setup lang="ts">
import Loading from './components/Loading.vue';
import { lazyLoadComponentIfVisible } from './utils';

const LazyLoaded = lazyLoadComponentIfVisible({
  componentLoader: () => import('./components/HelloWorld.vue'),
  loadingComponent: Loading,
});
</script>

<template>
  <LazyLoaded />
</template>

总结

在本文中,我们学习了如何使用 Intersection Observer API 和 defineAsyncComponent 函数在 Vue 组件可见时对其进行懒加载。如果有一个包含许多组件的首页,并希望改善应用程序的初始加载时间,这将非常有用。

标签:Vue,const,loadingComponent,defineAsyncComponent,component,组件,加载
From: https://www.cnblogs.com/chuckQu/p/17718625.html

相关文章

  • 从零开始学习Vue3路由,提升你的前端开发技能
    Vue3是当前最流行的前端框架之一,它提供了许多方便的功能和工具,其中路由(Router)就是其中之一。本文将介绍如何在Vue3中使用路由。安装和使用VueRouter首先,我们需要安装VueRouter。在终端中输入以下命令:npminstallvue-router@next--save接下来,我们需要创建一个路由实例。在......
  • vue父组件值更新子组件没更新
    因为父组件和子组件的数据单向绑定关系,子组件中的数据并不是从父组件中获取的而是通过props传递的。因此只更新父组件的数据不会自动更新子组件中的数据。需要在子组件中通过watch监听num的变化,将最新的值传递给变量,从而更新展示。点击清空button会把num重新赋值,自动触发watch监听......
  • Vue3引入滑块验证组件-2分钟搞定
    手把手视频地址:https://www.bilibili.com/video/BV1Nu4y1r7Wr/安装npminstall--savevue3-slide-verify登录页面引入template下<template><divclass="login"> <el-cardclass="cover"v-if="loginUser.data.user"> <slide......
  • Python从入门到实战-Scrapy源码2-核心组件
    Scrapy核心组件本篇文章解决:Scrapy有哪些核心组件?以及它们主要负责了哪些工作?这些组件为了完成这些功能,内部又是如何实现的?爬虫类上次讲到Scrapy运行起来后,执行到最后到了Crawler的crawl方法,我们来看这个方法:@defer.inlineCallbacksdefcrawl(self,*args,**kwargs)......
  • 【Vue】定义配置方法&数据代理
    hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~Object定义配置方法代码引出数据代理,先上代码,后加解释<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>回顾Object.defineproperty方法</title></head><body&......
  • Vue-基本语法及事件绑定
    一.基本语法v-bind绑定:双大括号不能在HTMLattributes中使用。想要响应式地绑定一个attribute,应该使用 v-bind 指令代码展示:<divid="app"><spanv-bind:title="message"v-html="tips"></span></div><script>letvue=newVue(......
  • bus兄弟组件传值
    bus兄弟组件传值,注意:1、监听时机要比发送时机早2、这两个组件不要按需引入,不然会导致首次收不到传的值例:在组件1的mounted里面发送值:this.$bus.$emit('selected',true)在组件2的created里面监听值:this.$bus.$on("selected",(data)=>{})......
  • vue样式穿透
    本文转载自https://www.jb51.net/article/253428.htm#_label0,转载仅供学习使用.scoped属性我们在vue组件写样式一般是在<style>标签里面,但是我们在这里的样式默认是全局样式,如果其它组件的class名取重复了则会导致样式污染。所以vue支持在<style>标签添加scoped属性,这样当前组......
  • 15-Vue核心-列表过滤和列表排序
    列表过滤 监视属性,实现列表过滤<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>基本列表</title><!--引入Vue--><scripttype="text/javascript......
  • IDEA 本地启动项目时候提示:错误:无法加载主类StartMain
    这也许是IDEA的bug.最好的办法就是清理IDEA项目缓存。具体步骤如下:一、检查使用包版本是否正确 二、清除缓存重启 ......