lazy

代码分割 - 按需加载组件,减少初始加载时间

核心概述

lazy 允许你动态导入组件,减少应用的初始 bundle 大小。组件会在首次渲染时才加载,提升应用的加载性能。

lazy 必须与 Suspense 配合使用,用于在组件加载时显示 fallback UI。

技术规格

TypeScript

function lazy<T>(
  factory: () => Promise<{ default: T }>
): T

TypeScript

import { lazy, Suspense } from 'react';

// 懒加载组件
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// 路由级代码分割
function Home() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  );
}

核心概述

技术规格

延伸阅读