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>Loading...</div>}>
          <MyComponent />
        </Suspense>
      )}
    </div>
  );
}

以上是兩種常用的 umi 動態加載組件的方法。在使用這些方法時，需要注意按需加載組件時，有些組件需要加載後才能顯示，需要使用 React.Suspense 組件顯示加載狀態，保證組件渲染流程正常。