Lazy

懒加载组件，按需异步加载组件代码。

Props

interface LazyProps<T extends Component> extends LazyLoadOptions {
  loader: LazyLoader<T>
  props?: WithProps<T>
  children?: ComponentProps<T>['children']
}

interface LazyLoadOptions {
  loading?: () => View
  delay?: number
  timeout?: number
  onError?: (e: unknown) => View
}

属性	类型	说明
`loader`	`() => Promise<{ default: Component }>`	组件加载器
`props`	`WithProps<T>`	传递给加载组件的属性
`children`	`RenderChildren`	子节点
`loading`	`() => View`	加载中显示的内容
`delay`	`number`	延迟显示 loading 的时间（ms）
`timeout`	`number`	超时时间（ms）
`onError`	`(e: unknown) => View`	加载失败时显示的内容

lazy()

创建懒加载包装组件。

类型定义

declare function lazy<T extends Component>(
  loader: () => Promise<{ default: T }>,
  options?: LazyLoadOptions
): LazyWrapper<T>

示例

使用 lazy() 函数：

tsx

import { lazy, Suspense } from 'vitarx'

const AsyncComponent = lazy(() => import('./HeavyComponent'))

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  )
}

使用 Lazy 组件：

tsx

import { Lazy } from 'vitarx'

const AsyncComponent = Lazy({
  loader: () => import('./HeavyComponent'),
  delay: 200
})

function App() {
  return <AsyncComponent />
}

preloadComponent()

预加载懒加载组件。

类型定义

declare function preloadComponent<T extends Component>(loader: LazyLoader<T>): Promise<T>

示例

import { preloadComponent } from 'vitarx'

const loader = () => import('./HeavyComponent')
preloadComponent(loader) // 提前加载

参考：Lazy 详解