react 懒加载封装

第一步：安装

npm install react-loadable --save

第二步 src 下 建立一个util文件 然后建立一个loadable.js

第三步： loadable.js 里写入 

 

import React from 'react';
import Loadable from 'react-loadable';

//通用的过场组件
const loadingComponent =()=>{
    return (
        <div>loading</div>
    ) 
}
//过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
export default (loader,loading = loadingComponent)=>{
    return Loadable({
        loader,
        loading
    });
}

 

　

第四步 在你需要的页面引入 路径跟随文件而改变

//懒加载
import loadable from '../util/loadable'

　Error 就是组件名  后面跟着路径  跟随文件路径而改变

　const Error = loadable(()=>import('../views/error/Error'))