如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 处理加载状态？

如何在 React 中实现组件的懒加载（Lazy Loading）并配合 Suspense 处理加载状态？

在 React 中，可以使用 React.lazy() 和 Suspense 来实现组件的懒加载，从而优化应用的初始加载性能。

实现方式：

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

// 使用 React.lazy 动态导入组件
const LazyComponent = lazy(() => import('./LazyComponent'));

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

export default App;

解析：

• React.lazy() 接收一个动态 import() 函数，该函数返回一个 Promise，Promise 解析后应导出一个默认组件。
• Suspense 组件用于包裹懒加载组件，当组件尚未加载完成时，会显示 fallback 中指定的内容（如加载提示）。
• 这种方式将 LazyComponent 的代码拆分为单独的 chunk，在需要时才加载，减少主包体积，提升首屏加载速度。
• 注意：React.lazy 目前只支持默认导出（default export），若需懒加载具名导出组件，可创建中间模块进行默认导出包装。

此外，在路由场景中，结合 React Router 可实现路由级代码分割：

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

这种方式显著提升了大型应用的性能和用户体验。