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

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

在 React 中，可以使用 React.lazy() 与 Suspense 组件来实现组件的懒加载。这种方式能将组件的代码拆分为独立的代码块（code split），仅在需要时才动态加载，从而减少初始 bundle 体积，提升首屏加载速度。

示例代码如下：

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

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

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

export default App;

解析：

• React.lazy() 接收一个函数，该函数必须调用动态 import()，并返回一个 Promise。该 Promise 解析后应导出一个默认导出的 React 组件。
• Suspense 组件用于包裹懒加载组件，在组件尚未加载完成时展示 fallback 内容（如加载提示）。
• 此功能依赖于支持动态 import() 的打包工具（如 Webpack 或 Vite），它们会自动进行代码分割。
• 注意：React.lazy 仅支持默认导出，若组件使用命名导出，需将其包装在一个默认导出的中间模块中。

通过这种方式，可以有效减少主 bundle 体积，实现按需加载，显著提升应用的初始加载性能和用户体验。