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

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

在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载，从而优化应用的初始加载性能。

示例代码如下：

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

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

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

export default App;

解析：

1. React.lazy()：接受一个函数作为参数，该函数必须调用动态 import() 并返回一个 Promise。React 会自动在组件首次渲染时加载该模块。
2. Suspense：用于包裹 lazy 组件，在组件尚未加载完成时显示 fallback 内容（如加载指示器）。
3. 注意事项：
   • React.lazy 仅支持默认导出（default export）。若需导入具名导出，可创建中间模块进行默认导出。
   • 仅适用于客户端渲染，不适用于服务器端渲染（SSR）。在 SSR 场景中需使用其他方案（如 Loadable Components）。
   • 路由级别懒加载是常见用法，例如配合 React Router 实现按路由拆分代码。

这种模式可有效减少首屏 bundle 体积，提升页面加载速度和用户体验。