【Umi】通过配置 dynamicImport loadingComponent 实现加载效果

在前端单页面应用中，子页面的代码都是当用户访问到的时候，才会异步去加载子页面的代码。如果子页面代码较大，
那么会给用户一段时间的卡顿感，很影响使用体验。所以，我们想在加载子页面代码时，显示 loading 组件，从而
优化体验。在 Umi 中，可以通过简单的配置，即可实现。

1、编写loading组件:
npm install --save nprogress
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
config.ts文件中
dynamicImport: {
    loading: '@/components/PageLoading'
},
3、修改加载条样式
:global {
  #nprogress {
    .bar {
      background: rgb(48, 222, 235) !important; //自定义颜色
      height: 5px !important;
    }
  }
}