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

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

回答与解析：

在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载，从而进行代码分割（Code Splitting），优化应用的初始加载性能。

步骤如下：

1. 使用 React.lazy() 动态导入组件：

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

2. 在 JSX 中用 Suspense 包裹懒加载组件，并提供 fallback UI：

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

注意事项：

• React.lazy() 只支持默认导出（default export）。如果组件是命名导出，需要创建一个中间模块将其转为默认导出，或者在导入时包装一层。
• Suspense 目前主要用于配合懒加载组件，未来可能会支持数据获取等其他场景。
• 在服务端渲染（SSR）中，React.lazy() 不被支持，需使用其他方案（如 Loadable Components）。

通过这种方式，只有当组件实际需要渲染时，才会加载对应的代码包，有效减少首屏 bundle 体积，提升用户体验。