1.啥是defineAsyncComponent？它和普通组件有啥不一样？

terry 5小时前阅读数 5 #Vue

不少刚开始深入Vue2开发的同学，在做项目性能优化或者组件拆分时，总会碰到“异步组件”这个概念，而defineAsyncComponent就是Vue2里实现异步组件的关键工具，但它到底是干啥的？怎么用能解决实际问题？这篇文章把常见疑问拆成一个个小问题,用白话讲清楚～

先理解“异步组件”的核心——组件不是在页面加载时就打包好，而是等需要用的时候再去加载，defineAsyncComponent就是Vue2提供的、专门用来创建这种“按需加载”组件的方法。

举个简单对比：
普通组件是同步引入，比如这样写：

import NormalComp from './NormalComp.vue'
export default {
  components: { NormalComp }
}

打包的时候，NormalComp的代码会直接被塞进当前JS文件里，不管用户有没有立刻用到这个组件，首屏加载时就把它下载了。

而用defineAsyncComponent创建的异步组件是延迟加载，写法变成：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
export default {
  components: { AsyncComp }
}

这里的关键是() => import(...)——它返回一个Promise，Vue会等这个Promise resolve（也就是组件文件下载完成）后，再把组件渲染出来，打包时，AsyncComp会被单独拆成一个JS文件，只有用户操作触发这个组件渲染时（比如点击按钮显示弹窗），才会去请求这个文件。

那它解决的核心问题是啥？减小首屏加载的JS体积，如果项目里有很大的组件（比如包含复杂图表、富文本编辑器），或者很多“非首屏必须”的组件（比如某个tab里的内容），用异步加载能让首屏更快显示，用户体验更流畅。

啥场景下非得用defineAsyncComponent？

不是所有组件都要异步，得看场景是否“值得拆分”，这几个典型场景用它特别香：

（1）大型功能组件的延迟加载

比如后台管理系统里的「报表模块」，包含ECharts图表、大量数据统计逻辑，代码体积很大，如果用户进入系统后，不一定立刻看报表，就可以把报表组件异步化：

const ReportComp = defineAsyncComponent(() => import('./components/Report.vue'))

这样首屏加载时，报表的代码不会被包含进来，等用户点击“报表”tab时再加载，减少首屏压力。

（2）路由组件的拆分（和Vue Router配合）

Vue Router里的页面级组件，更适合用异步加载——每个页面单独成一个JS块，访问时才加载。

// 路由配置里这样写
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: defineAsyncComponent(() => import('./views/User.vue'))
    }
  ]
})

用户访问/user路径时，才会去下载User.vue的代码，而不是把所有页面的代码都塞到首屏JS里。

（3）代码维护性提升

大项目里，组件逻辑越拆越细，比如一个页面里有「弹窗A」「弹窗B」两个很少用到的组件，把它们异步化后，主页面的代码会更简洁，后续维护时找代码也更清晰：

export default {
  components: {
    DialogA: defineAsyncComponent(() => import('./DialogA.vue')),
    DialogB: defineAsyncComponent(() => import('./DialogB.vue'))
  }
}

defineAsyncComponent基础用法有哪些？要注意啥？

它的用法分“简单版”和“带配置项版”，不同场景选不同写法。

（1）简单版：快速实现懒加载

如果只需要“按需加载”，不需要处理加载中、加载失败的状态，用最简写法：

import { defineAsyncComponent } from 'vue'
// 直接返回一个函数，函数里用import()加载组件
const SimpleAsync = defineAsyncComponent(() => import('./SimpleAsync.vue'))

然后在模板里当普通组件用：

<template>
  <div>
    <SimpleAsync />
  </div>
</template>

（2）带配置项版：处理加载状态和错误

如果想给用户更友好的反馈（比如加载时显示loading动画，加载失败显示错误提示），就要用对象形式的配置：

import { defineAsyncComponent } from 'vue'
import Loading from './Loading.vue' // 加载中的占位组件
import Error from './Error.vue'     // 加载失败的提示组件
const ConfigAsync = defineAsyncComponent({
  // 核心：加载组件的函数，必须返回Promise
  loader: () => import('./ConfigAsync.vue'),  
  // 加载过程中显示的组件（可选）
  loadingComponent: Loading,  
  // 加载失败后显示的组件（可选）
  errorComponent: Error,  
  // 延迟多久后显示loadingComponent（毫秒），防止网络快时闪烁
  delay: 200,  
  // 加载超时时间（毫秒），超过这个时间算加载失败
  timeout: 3000  
})

这里要注意几个细节：

loader函数必须返回Promise，而import()本身就返回Promise，所以直接写() => import(...)就行；
loadingComponent和errorComponent是普通的Vue组件，要提前引入；
delay可以避免“组件加载太快导致loading一闪而过”的问题，比如设置200ms，网络好时组件100ms加载完，就不显示loading；网络差时超过200ms才显示loading；
timeout要根据实际网络情况设，比如国内项目设3 - 5秒，防止用户一直等。

（3）容易踩的坑

忘记引入defineAsyncComponent：要从'vue'里导入，import { defineAsyncComponent } from 'vue'，漏掉的话会报undefined错误；
loader里写错路径：比如把./AsyncComp.vue写成./asyncComp.vue（Vue2对文件名大小写敏感），导致加载失败；
在Vue Router里用的时候，别和其他路由配置冲突：比如路由的component选项要确保是异步组件工厂函数。

和Vue Router的“路由懒加载”有啥关系？

很多同学学的时候会 confuse：Vue Router里的路由懒加载和defineAsyncComponent是一回事吗？

简单说：路由懒加载的底层就是用了defineAsyncComponent。

Vue Router的路由配置里，component支持两种写法：

// 写法1：显式用defineAsyncComponent
component: defineAsyncComponent(() => import('./views/User.vue'))
// 写法2：简化版（内部自动用了defineAsyncComponent）
component: () => import('./views/User.vue')

这两种写法效果一样，都是让/User对应的页面组件异步加载。

但路由级异步和组件级异步有区别：

路由级：针对“页面”拆分，每个页面是一个独立的JS块；
组件级：针对“页面内的某个组件”拆分，粒度更细。

举个例子：一个页面User.vue里，有个很大的评论组件Comment.vue，这时候可以：

路由级：User.vue本身异步加载（访问/user时加载）；
组件级：Comment.vue在User.vue里用defineAsyncComponent异步加载（用户滚动到评论区或点击展开时加载）。

加载慢、报错了咋处理？

异步加载难免碰到网络差、文件丢失等问题，这时候得给用户友好的反馈。

（1）加载慢：让用户知道“正在加载”

用loadingComponent和delay配置：

delay设200 - 300ms，避免网络快时loading闪烁；

loadingComponent里放个 spinner 动画或者“加载中...”文字，

<template>
<div class="loading">
  <img src="./spinner.gif" alt="加载中">
  拼命加载中...
</div>
</template>

（2）加载失败：给用户重试机会

用errorComponent，还能在里面加“重试”逻辑，比如Error.vue里放个按钮，点击后重新加载组件：

<template>
  <div class="error">
    <p>组件加载失败了😢</p>
    <button @click="reload">点击重试</button>
  </div>
</template>
<script>
export default {
  props: ['reload'] // 从异步组件那里接收reload方法
}
</script>

然后在defineAsyncComponent的配置里，给errorComponent传reload：

const ErrorAsync = defineAsyncComponent({
  loader: () => import('./ErrorAsync.vue'),
  errorComponent: Error,
  // 把reload方法传给errorComponent
  onError: (error, retry, fail, attempts) => {
    // attempts是已尝试次数
    if (attempts <= 3) {
      retry() // 重试加载
    } else {
      fail()  // 放弃，显示errorComponent
    }
  }
})

这样用户点击“重试”时，触发retry()就能重新加载组件。

（3）超时问题：别让用户一直等

设置timeout，比如3000ms（3秒），超过后自动显示errorComponent，如果是弱网环境，还可以结合onError里的重试逻辑，比如超时后自动重试几次。

进阶玩法：复杂场景咋用defineAsyncComponent？

除了基础加载，它还能和其他技术结合，解决更复杂的需求。

（1）结合Vuex提前加载数据

有些异步组件需要依赖接口数据，比如报表组件需要先请求统计数据，可以在loader里同时处理组件加载和数据请求：

const ReportAsync = defineAsyncComponent({
  loader: async () => {
    // 先请求数据
    const { data } = await axios.get('/api/report-data')
    // 再加载组件，并把数据传进去
    const component = (await import('./Report.vue')).default
    component.data = () => ({ reportData: data })
    return component
  },
  loadingComponent: Loading
})

这样组件加载完成后，数据也已经请求好了，渲染时直接用。

（2）根据用户权限加载不同组件

比如后台系统里，管理员和普通用户看到的弹窗组件不一样，可以在loader里判断权限：

import { defineAsyncComponent } from 'vue'
import store from './store' // Vuex仓库
const AuthDialog = defineAsyncComponent(() => {
  const isAdmin = store.state.user.isAdmin
  if (isAdmin) {
    return import('./AdminDialog.vue')
  } else {
    return import('./NormalDialog.vue')
  }
})

这样不同权限的用户，加载的组件不同，避免加载无用代码。

（3）服务端渲染(SSR)中的兼容

如果项目用Nuxt.js这类SSR框架，异步组件要注意服务端和客户端的差异，比如有些组件只在客户端渲染（比如依赖window对象的组件），可以结合ssr: false（不过Vue2的Nuxt中，defineAsyncComponent的配置可能需要调整，要测试环境兼容性）。

和Vue3的defineAsyncComponent有啥区别？

如果以后要升级Vue3，得知道两者的差异：

语法简化：Vue3里defineAsyncComponent不需要显式写loader，直接支持defineAsyncComponent(() => import(...))，而且配置项更灵活；
状态处理：Vue3引入了Suspense组件，能更优雅地处理异步组件的加载状态，而Vue2没有Suspense，只能靠loadingComponent和errorComponent；
兼容性：Vue2的defineAsyncComponent是单独的方法，Vue3中属于核心API的一部分，写法更融合。

不过如果现在还在维护Vue2项目，把上面这些用法吃透，足够解决90%的异步组件需求啦～

defineAsyncComponent是Vue2里实现“组件懒加载”的利器，核心价值是拆分代码、优化首屏性能，从基础的语法到复杂场景的处理，再到和路由、Vuex的结合，掌握这些知识点后，项目的加载速度和可维护性都会上一个台阶，下次再遇到“首屏加载慢”“组件代码太臃肿”的问题,不妨试试用它来拆分优化～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue2项目里ESLint到底怎么配？常见问题和实用技巧全解答下一篇：一、先想清楚，为啥非升级Vue3不可？

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。