组件懒加载

前言

组件懒加载最常用于异步加载大型/复杂组件或在需要时才进行加载
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>

无论是 Vue 2还是 Vue 3，一旦异步组件注册成功，就可以像普通组件一样进行使用

3️⃣组件懒加载的使用场景

有时资源拆分的过细也不好，可能会造成浏览器http请求的增多

总结出三种适合组件懒加载的场景：

• JS 文件体积大的页面：在加载复杂的页面时，将某些组件定义为异步可以显著提高页面的加载速度
• 按需触发的组件：只有在该组件真正需要使用时才去加载相应的资源，从而避免不必要及浪费的加载
• 多页面复用的组件：对于包含大量数据的长列表，您可能希望只在需要滚动到屏幕上的部分时才加载列表

结语

感谢读者阅读并关注博客文章，并对文章中提到的观点、建议或批评表示感谢