如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 使用？

答：在 React 中，可以通过 React.lazy() 和 Suspense 实现组件的懒加载。React.lazy() 允许你动态导入组件，使其在首次渲染时才加载对应的代码，从而减少初始包体积；Suspense 则用于在组件加载过程中显示 fallback 内容（如加载指示器）。

示例代码：

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 应解析为一个包含 default 导出组件的对象。
• Suspense 组件通过 fallback 属性指定加载期间显示的内容，它可以包裹一个或多个使用 lazy 加载的组件。
• 此方案适用于路由级或条件渲染下的组件拆分，能显著提升首屏加载性能。
• 注意：React.lazy 仅支持默认导出（default export），若需懒加载具名导出，可创建一个中间模块进行默认导出包装。

该功能需搭配支持动态 import() 的构建工具（如 Webpack、Vite）使用，现代前端构建工具通常已内置支持。