React路由懒加载、组件懒加载

先下载react-loadable

npm i react-loadable -S

建立一个loadable.js

import Loadable from 'react-loadable'; 
export default function withLoadable (comp) {
    return Loadable({
        loader:comp,
        loading:()=>null,
        delay:"",
    })
}

router.js

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Bundle from './loadable';
//设置规则 传递值 接收值 显示内容
const Home= Bundle(()=>import('../view/home/home'));
const Login= Bundle(()=>import('../view/login/login'));
function AppRouter() {
  let routerConfig = [
    {path:'/',title:'首页',exact:true,component:Home},
    {path:'/login/:id?',title:'登录',exact:false,component:Login},    
  ]
  return (
    <Router>
      {
        routerConfig.map((item,index)=>{
          return (<Route key={index} exact={item.exact} path={item.path} component={item.component}/>)
        })
      }
    </Router>
  );
}

export default AppRouter;

page下的js文件

import Bundle from "../../utils/loadable";
const Nav = Bundle(() => import("../../component/Nav/Nav"));
const HomeUi = () => {
	  return (
		 <Nav></Nav>
	)
};
export default HomeUi;