如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载，从而减少初始 bundle 体积，提升应用加载性能。

实现方式：

import React, { Suspense, lazy } from 'react';

// 使用 lazy 动态导入组件
const LazyComponent = lazy(() => import('./LazyComponent'));

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

解析：

• React.lazy() 接收一个函数，该函数必须调用动态 import()，返回一个 Promise，Promise resolve 的模块必须默认导出（default export）一个 React 组件。
• Suspense 是一个内置组件，用于在懒加载组件加载完成前显示 fallback 内容（如加载指示器）。
• 这种方式适用于路由组件或非首屏组件，可以显著减少主 bundle 体积，实现代码分割（Code Splitting）。
• 注意：React.lazy 目前不支持服务端渲染（SSR），如需 SSR 中实现懒加载，需使用 loadable-components 等第三方库。

通过懒加载，用户仅在真正需要时才下载对应组件的代码，从而优化首屏加载速度和用户体验。