标签：加载 star 编写 UNC 配置 target mic efault pre
在前端单页面应用中，子页面的代码都是当用户访问到的时候，才会异步去加载子页面的代码。
如果子页面代码较大，那么会给用户一段时间的卡顿感，很影响使用体验。
所以，我们想在加载子页面代码时，显示 loading 组件，从而优化体验。
在 Umi 中，可以通过简单的配置，即可实现。
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 效果了
【记录】 【Umi】通过配置 dynamicImport loadingComponent 实现加载效果
标签：加载 star 编写 UNC 配置 target mic efault pre
原文地址：https://www.cnblogs.com/Ewarm/p/12965643.html
