记录 Umi通过配置 dynamicImport loadingComponent 实现加载效果

Posted 2020-12-22 ewarm

在前端单页面应用中，子页面的代码都是当用户访问到的时候，才会异步去加载子页面的代码。

如果子页面代码较大，那么会给用户一段时间的卡顿感，很影响使用体验。

所以，我们想在加载子页面代码时，显示 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