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

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

回答：
在 React 中，可以使用 React.lazy 与 Suspense 组合来实现组件的懒加载。

示例代码：

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

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

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

export default App;

解析：

• React.lazy 接收一个动态 import() 函数，该函数返回一个 Promise，Promise resolve 后导出默认组件。
• 被懒加载的组件会在需要渲染时才动态加载，而不是在应用初始加载时就包含在主 bundle 中，从而减小初始包体积。
• Suspense 用于包裹懒加载组件，提供加载状态（fallback），在组件代码加载完成前显示 fallback 内容。
• 注意：React.lazy 目前仅支持默认导出（default export）的组件。如果模块使用命名导出，需创建中间模块进行默认导出转换。
• 此功能依赖于打包工具（如 Webpack、Vite）对动态 import() 的支持，会自动进行代码分割（code splitting）。

通过这种方式，可以显著提升首屏加载速度，尤其适用于路由组件或大型 UI 模块的按需加载场景。