【记录】 【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

上一篇:星际SC 地图 Big Game Fort 要塞之战 修正了 BIG GAME 地图的平衡性


下一篇:umi 框架 如何配置 自定义 插件 和 loader