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

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

回答：
在 React 中，可以使用 React.lazy() 与 Suspense 组件配合实现组件的懒加载。React.lazy() 接收一个动态 import 函数，该函数返回一个 Promise，而 Suspense 用于在组件加载完成前显示 fallback 内容（如加载动画）。

示例代码：

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

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

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

解析：

• React.lazy() 只支持默认导出（default export）的组件。若需懒加载具名导出（named export）的组件，需通过中间模块将其转为默认导出。
• 动态 import() 会将被懒加载的组件打包成单独的代码块（chunk），只有在首次渲染该组件时才加载，从而减少主包体积，提升首屏加载速度。
• Suspense 提供统一的加载状态处理，可嵌套使用，也支持 SSR（服务端渲染）需配合其他方案如 loadable-components。
• 适用于路由级组件、模态框、大型功能模块等非首屏必需内容的延迟加载。

注意：在使用路由懒加载时，推荐结合 react-router-dom 的 lazy（v6.4+）或手动封装懒加载组件以实现最佳实践。