如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 优化首屏加载性能？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 优化首屏加载性能？

回答：
在 React 中，可以使用 React.lazy() 结合 Suspense 组件来实现组件的懒加载。React.lazy 接受一个动态 import() 函数，返回一个 Promise，该 Promise 解析后应导出一个 React 组件。Suspense 则用于在组件加载期间显示 fallback 内容（如加载指示器），避免白屏或布局抖动。

示例代码：

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

// 懒加载一个组件
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

解析：

• React.lazy()：只有在组件首次渲染时才会加载对应的代码块，适用于路由组件或大型功能模块。
• Suspense：捕获子组件中处于“加载中”状态的 lazy 组件，并展示 fallback UI，提升用户体验。
• 注意事项：
  • React.lazy 仅支持默认导出（default export），若需导入具名导出，可封装一层中间模块。
  • 目前 Suspense 仅支持懒加载组件，不支持数据获取（除非使用 React Server Components 或实验性 API）。
  • 在服务端渲染（SSR）中，React.lazy 不被支持，需改用其他方案（如 loadable-components）。

通过这种方式，可以有效减小初始 bundle 体积，加快首屏渲染速度，提升性能指标（如 LCP、FCP）。