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

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

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

import React, { lazy, Suspense } from '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。当组件首次被渲染时，才会加载对应的模块，从而实现代码分割（Code Splitting）。
• Suspense 是 React 提供的用于处理异步操作的组件，fallback 属性指定在组件加载完成前显示的占位内容（如 loading 指示器）。
• 此方法通常与打包工具（如 Webpack）配合使用，Webpack 会自动为动态导入的模块生成单独的 chunk 文件，从而减少主 bundle 体积，提升首屏加载速度。
• 注意：React.lazy 仅支持默认导出（default export）的组件。若需懒加载具名导出的组件，可创建一个中间模块进行默认导出转换。

该方案适用于路由级组件或非首屏关键组件的懒加载，是现代 React 应用性能优化的重要手段之一。