Vue组件懒加载

最新推荐文章于 2024-04-23 18:09:29 发布

明月落乌江

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量4.2k

点赞数

分类专栏： vue 前端优化文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_54334713/article/details/130369993

版权

vue 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端优化

2 篇文章 0 订阅

订阅专栏

组件懒加载

前言

组件懒加载最常用于异步加载大型/复杂组件或在需要时才进行加载
Vue 2和Vue 3均支持组件懒加载，本文将介绍如何在Vue 2和Vue 3中实现组件懒加载，和一些使用场景

1️⃣方法一：使用Webpack的代码分割能力

Vue 2和Vue 3都可以使用，但构建打包后才能生效

const dialogInfo = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/dialogInfo');

然后，就可以在需要使用该组件的地方，像使用普通组件一样引入即可：

<template>
  <div>
    <h1>按需加载示例</h1>
    <dialogInfo />
  </div>
</template>

2️⃣方法二：使用Vue异步组件

Vue2使用

在 Vue 2 中，可以使用 Vue.component() 方法来注册异步组件，其中异步组件选项是一个返回包含组件信息的对象的函数。具体使用方式如下：

//基本用法：
Vue.component('async-component', () => import('./MyComponent.vue'))
//高阶用法：
const AsyncComponent = () => ({
  // 异步方法返回要加载的组件
  component: import('./MyComponent.vue'),
  // 组件加载期间显示的组件
  loading: LoadingComponent,
  // 加载出错时显示的组件
  error: ErrorComponent,
  // 延迟显示加载状态（以毫秒为单位）。默认值：`200`。
  delay: 200,
  // 等待时间长度等于或超过 `delay`，loadingComponent 将被渲染。如果设置为 0，则始终呈现loadingComponent。
  timeout: 3000
});
Vue.component('async-component', AsyncComponent);

在上述示例中，我们使用 Vue.component() 方法将名为 async-component 的异步组件注册到全局组件库中。对于高阶用法，我们定义了一个包装器函数 AsyncComponent()，它返回一个包含组件相关信息的对象。

Vue3使用

在 Vue 3 中，推荐使用 defineAsyncComponent() 函数来定义异步组件。该函数接受一个参数，即异步组件选项或动态导入方法，并返回一个组件实例。具体使用方式如下：

import { defineAsyncComponent } from 'vue';
//基本用法
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'))
//高阶用法
const AsyncComponent = defineAsyncComponent({
  // 异步方法返回要加载的组件
  loader: () => import('./MyComponent.vue'),
  // 组件加载期间显示的组件
  loadingComponent: LoadingComponent,
  // 加载出错时显示的组件
  errorComponent: ErrorComponent,
  // 如果设置为 `true`，将使用Suspense包装该组件。默认值：`false`。
  suspense: false,
  // 延迟显示加载状态（以毫秒为单位）。默认值：`200`。
  delay: 200,
  // 等待时间长度等于或超过 `delay`，loadingComponent 将被渲染。如果设置为 0，则始终呈现loadingComponent。
  timeout: 3000,
})

在上述示例中，我们使用 defineAsyncComponent() 函数将名为 AsyncComponent 的异步组件定义为一个返回加载组件的函数。与 Vue 2 不同的是，在 Vue 3 中异步组件选项可以是一个对象，而不仅仅是一个返回对象的函数。

在 Vue 3 中使用 defineAsyncComponent() 定义包装了 Suspense 的异步组件的示例代码：

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  suspense: true,
  delay: 200
});

// 在模板中使用异步组件
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <!-- 加载中的提示 -->
    </template>
  </Suspense>
</template>