【記錄】 【Umi】通過配置 dynamicImport loadingComponent 實現加載效果

在前端單頁面應用中，子頁面的代碼都是當用戶訪問到的時候，才會異步去加載子頁面的代碼。

如果子頁面代碼較大，那么會給用戶一段時間的卡頓感，很影響使用體驗。

所以，我們想在加載子頁面代碼時，顯示 loading 組件，從而優化體驗。

在 Umi 中，可以通過簡單的配置，即可實現。

1、編寫 loading 組件：

import React, { useEffect } from 'react'
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
function PageLoading() {
  useEffect(() => {
    const progress = NProgress.start();
    return () => {
      progress.done();
    }
  }, [])
  return<></>
 }

export default PageLoading

2.配置config

import { defineConfig } from 'umi';
export default defineConfig({
  dynamicImport: {
    loading:'@/components/PageLoading'
  },
  nodeModulesTransform: {
    type: 'none',
  },
  antd: false,
  mock: false,
  hash: true,
  proxy: {
    '/ssp-api/': {
      target: '====',
      changeOrigin: true,
      ws: false,
    },
  },
});

　3.配置完畢，等 umi 熱加載完成后，回到頁面，切換路由，就可以看到 loading 效果了

參考：https://www.jianshu.com/p/14609ad96780