【UMI】路由懒加载

原生的路由加载是在打包的时候,将所有的组件都打包到一个文件中,然后在首次进入页面的时候就会加载这个包,相当于全量包.接着在你点击路由时去查找相关组件.网络压力全在首屏加载的时候.

路由懒加载:分包,分请求.先分不同的包,然后根据路由从后端请求.加载压力分到每一次路由请求.

 

在umi中使用路由懒加载

1.动态路由

import { dynamic } from 'umi' 
 const UploadTable= dynamic({ 
 loader: async function(){ 
 		 const {default:UploadTable} = await import(/* webpackChunkName: "async_UploadTable"*/ './uploadTable') 
 	return UploadTable; 
 } 
 }) 

export default {UploadTable} 

 2.umirc.ts配置

export default defineConfig({
  dynamicImport: {},

});

 3.正常的使用路由

 

 

效果

首屏加载时请求数据量变少,每次点击路由都有请求发出