如何在 React 中实现组件的懒加载（Lazy Loading）以优化应用的初始加载性能？

如何在 React 中实现组件的懒加载（Lazy Loading）以优化应用的初始加载性能？

在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载。具体步骤如下：

1. 使用 React.lazy() 动态导入组件：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

2. 在 JSX 中用 Suspense 包裹懒加载的组件，并提供 fallback 内容（如加载指示器）：

import { Suspense } from 'react';

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

解析：

• React.lazy() 接收一个函数，该函数必须调用动态 import() 并返回一个 Promise，Promise 解析后应导出一个默认组件。
• Suspense 用于在懒加载组件尚未加载完成时显示 fallback 内容，提升用户体验。
• 此方法将组件拆分为单独的代码块（code split），仅在需要时才加载，从而减小主 bundle 体积，加快首屏加载速度。
• 注意：React.lazy 目前只支持默认导出（default export），若需导入具名导出，可创建中间模块进行默认导出包装。
• 适用于路由组件、模态框、非首屏内容等延迟加载场景。