异步组件

需要时再加载

什么是异步组件?

只有渲染时才加载,减少首屏包体积。

怎么用?

const AsyncView = defineAsyncComponent({
  loader: () => import('./View.vue'),
  loadingComponent: Loader,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 10000,
  onError(err, retry, fail, attempts) {
    if (attempts < 3) retry()
    else fail()
  }
})

路由懒加载

最常用的场景:

const routes = [
  {
    path: '/about',
    component: () => import('./About.vue')
  }
]

配合 Suspense

Vue 3 的 <Suspense> 可以处理异步组件的加载状态。

注意点

  • 设置合理的 delay,避免 Loading 闪烁
  • SSR 通常需要同步加载组件