【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.正常的使用路由

 

 

效果

首屏加載時請求數據量變少,每次點擊路由都有請求發出