1、 React.lazy

**React.lazy** 和 Suspense 技术还不支持服务端渲染。如果你想要在使用服务端渲染的应用中使用，React官方推荐 Loadable Components 这个库。它有一个很棒的服务端渲染打包指南。

React.lazy 函数能像渲染常规组件一样处理动态引入（的组件）。

A.未使用懒加载时直接导入

import OtherComponent from './OtherComponent';

B.懒加载的使用

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

此代码将会在组件首次渲染时，自动导入包含 OtherComponent 组件的包。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

C.使用 <Suupense> 标签包裹需要懒加载的组件

然后应在 Suspense 组件中渲染 lazy 组件，如此可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

D. fallback 属性展示加载过程中显示的组件元素

fallback 属性接受任何在组件加载过程中想展示的 React 元素。可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </div>
  );
}

2、 Reac.lazy 懒加载组件中的错误处理 ErrorBoundary 的使用

如果模块加载失败（如网络问题），它会触发一个错误。可以通过异常捕获边界（Error boundaries）技术来处理这些情况，以显示良好的用户体验并管理恢复事宜。

import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);