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

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

在 React 中，可以使用 React.lazy() 和 Suspense 组件实现组件的懒加载。React.lazy() 允许你动态导入组件，从而将该组件的代码拆分为单独的代码块，在需要时才加载。配合 Suspense，可以在组件加载时显示 fallback 内容（如加载动画），提升用户体验。

示例代码：

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

// 懒加载 MyComponent 组件
const MyComponent = lazy(() => import('./MyComponent'));

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

export default App;

解析：

• React.lazy() 接收一个函数，该函数必须调用动态 import() 并返回一个 Promise。
• Suspense 的 fallback 属性用于指定加载期间显示的内容。
• 此方式适用于路由组件或条件渲染的大型组件，能显著减少初始 bundle 体积，加快首屏加载速度。
• 注意：React.lazy() 目前仅支持默认导出（default export），若需懒加载具名导出，可创建中间模块进行默认导出包装。

该方案是 React 官方推荐的代码分割（Code Splitting）方式，适用于大多数现代打包工具（如 Webpack、Vite）。