react react-loadable异步组件(按需加载组件)

阳光穿透心脏的1/2处 2021-07-24 20:54 616阅读 0赞

1、引入
    	cnpm install --save react-loadable
    	
    2、使用
    
    	import React from 'react';
    	import Loadable from 'react-loadable';
    	
    	const LoadableComponent = Loadable({
    	  loader: () => import('需要加载的异步组件路径'),
    	  loading(){
    	      return 加载过程中显示的内容
    	  },
    	});
    	
    	export default ()=><LoadableComponent />
    	
    3、将原本路由组件替换成改异步组件
    	将原本导入的组件换成该组件即可
    	
    4、若原本路由组件使用了路由的属性(props.history等)
    	在换成异步组件的时候,本身要使用withRouter导入路由组件的属性
    	因为现在的路由组件是异步组件

代码示例:  
异步组件集合:

import { Loading} from '../components'
    import Loadable from 'react-loadable'
    
    
    const Dashboard=Loadable({ 
        loader:()=>import('./Dashboard'),
        loading:Loading
    })
    const Login=Loadable({ 
        loader:()=>import('./Login'),
        loading:Loading
    })
    
    const NotFound=Loadable({ 
        loader:()=>import('./NotFound'),
        loading:Loading
    })
    
    const Settings=Loadable({ 
        loader:()=>import('./Settings'),
        loading:Loading
    })
    
    const ArticleList=Loadable({ 
        loader:()=>import('./Article'),
        loading:Loading
    })
    
    const ArticleEdit=Loadable({ 
        loader:()=>import('./Article/Edit'),
        loading:Loading
    })
    
    
    
    export { 
        Dashboard,
        Login,
        NotFound,
        Settings,
        ArticleEdit,
        ArticleList
    }

路由文件中使用异步组件:

import { 
        Dashboard,
        Login,
        NotFound,
        Settings,
        ArticleEdit,
        ArticleList
    } from '../views'
    
    export const mainRouter=[
        { 
            pathname:'/login',
            component:Login,
        },
        { 
            pathname:'/404',
            component:NotFound,
        }
    ]
    
    export const adminRouter=[
        { 
            pathname:'/admin/dashboard',
            component:Dashboard,
        },
        { 
            pathname:'/admin/settings',
            component:Settings,
        },
        { 
            pathname:'/admin/article',
            component:ArticleList,
            exact:true
        },
        { 
            pathname:'/admin/article/edit/:id',
            component:ArticleEdit,
        },
    
    ]