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

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

回答：
在 React 中，可以使用 React.lazy 与 Suspense 来实现组件的懒加载。React.lazy 允许你动态导入（dynamic import）一个组件，而 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>
  );
}

export default App;

解析：

• React.lazy 接收一个函数，该函数必须调用 import() 动态导入组件，并返回一个 Promise。React 会等到该 Promise resolve 后才渲染组件。
• Suspense 是 React 提供的用于处理异步依赖（如代码分割、数据获取）的机制。fallback 属性指定加载期间显示的内容。
• 此方法能将懒加载组件的代码拆分成单独的 bundle，在需要时才加载，有效减少初始 bundle 体积，提升首屏加载速度。
• 注意：React.lazy 目前仅支持默认导出（default export）的组件。如果要懒加载具名导出的组件，需将其包裹在一个默认导出的中间模块中。

此外，结合路由使用懒加载（如在 React Router 中）可进一步优化按需加载，例如：

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

<Route path="/" element={
  <Suspense fallback={<Spinner />}>
    <Home />
  </Suspense>
} />