umi 动态加载 demo

当使用 umi 进行动态加载时，通常需要加载组件或页面的代码块，通过 code splitting 懒加载来提高应用程序的性能。以下是一些用于实现 umi 动态加载的代码方案：

通过 umi 的 dynamic 方法：

使用 umi 的 setTimeout 方法可以实现组件的按需加载。使用这种方法可以将组件的加载推迟到页面渲染后，减少应用程序的加载时间。以下是使用第一种方法进行组件的动态加载示例代码：

import { dynamic } from 'umi';

export default function Example() {
  const [visible, setVisible] = useState(false);

  function handleClick() {
    setVisible(true); // 点击时显示加载的组件
  }

  const AsyncComponent = dynamic({
    loader: async function() {
      const { default: MyComponent } = await import('./MyComponent');
      return MyComponent;
    },
  });

  return (
    <div>
      <button onClick={handleClick}>Load component</button>
      {visible && <AsyncComponent />}
    </div>
  );
}

通过 React.lazy 和 Suspense：

React.lazy 是 React 16.6 中引入的，它可以快速实现懒加载，而且使用起来非常方便。下面是使用 React.lazy 和 Suspense 实现组件动态加载的示例代码：

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

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

export default function Example() {
  const [visible, setVisible] = useState(false);

  function handleClick() {
    setVisible(true); // 点击时显示加载的组件
  }

  return (
    <div>
      <button onClick={handleClick}>Load component</button>
      {visible && (
        <Suspense fallback={<div>Loading...</div>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

以上是两种常用的 umi 动态加载组件的方法。在使用这些方法时，需要注意按需加载组件时，有些组件需要加载后才能显示，需要使用 React.Suspense 组件显示加载状态，保证组件渲染流程正常。