umi 動的ロードデモ

当使用 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}>コンポーネントをロード</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}>コンポーネントをロード</button>
      {visible && (
        <Suspense fallback={<div>読み込み中...</div>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

以上は二つの一般的な umi 動的読み込みコンポーネントの方法です。これらの方法を使用する際には、必要に応じてコンポーネントを読み込む際に、一部のコンポーネントは読み込まれた後に表示される必要があるため、React.Suspense コンポーネントを使用して読み込み状態を表示し、コンポーネントのレンダリングプロセスが正常に進行することを保証する必要があります。

umi 動的ロード デモ

umi 動的ロードデモ