React路由懒加载和vue路由懒加载

Lazyloading就是惰性加载或按需加载，即在需要的时候加载。对于像vue、react项目的组件渲染这样的单页应用，如果不应用懒加载，webpack打包后的文件会异常大，导致进入首页时加载的内容太多，时间太长很长，它会显示出来。首先，长时间的白屏，即使加载完成也不利于用户体验，而使用懒加载可以分页面，需要的时候再加载，可以有效的分担首页的加载压力和减少主页的加载时间；vue懒加载(router.js)//在vue中的vue-router生态中，实现路由的懒加载时，通过设置实例化VueRouter来定义路由对象importVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);通过设置路由集合将组件和路由一一映射~~~~constroutes=[rootpath{path:'/',redirect:{name:'guide'},},//配置引导页{path:'/guide',name:'guide',component:Guide,},//配置首页路径{path:"/main",name:"main",component:()=>import("@/views/Main.vue"),//二级子路由children:[//如果没有找到则进入电影页面{path:"",redirect:{name:"movie"}},//电影二级路由{path:"movie",name:"movie",component:()=>import("@/views/Movie.vue")},//电影院页面路由{path:"cinema",name:"cinema",COmponent:()=>import("@/views/Cinema.vue")},//产品页面路由{path:"good",name:"good",component:()=>import("@/views/Good.vue")},//我的个人中心路由{path:"mine",name:"mine",component:()=>import("@/views/Mine.vue")},//电影详情页面路由{path:"detail",name:"detail",component:()=>import("@/views/Detail.vue")},//电影选座{path:"choose",name:"choose",component:()=>import("@/views/Choose.vue")},//订单选择Orderform.vue{path:"orderform",name:"orderform",component:()=>import("@/views/Orderform.vue")},//商品详情页{path:"goodsdetail",name:"goodsdetail",component:()=>import("@/views/GoodsDetail.vue")},//购物车路由{path:"shopcar",name:"shopcar",component:()=>;import("@/views/Shopcar.vue")},//重定向到电影页面{path:"*",redirect:{name:"movie"}}]},//登录页面route{path:"/login",name:"login",component:()=>import("@/views/Login.vue"),},//城市页面路由{path:"/city",name:"city",component:()=>import("@/views/City.vue"),},//搜索页面路由{path:"/search",name:"search",component:()=>import("@/views/Search.vue")},//Redirect{path:'*',redirect:{name:'guide'}}]//定义路由对象constrouter=newVueRouter({//mode:'history',//base:process.env.BASE_URL,routes})//暴露接口exportdefaultrouterreactlazyloading：使用react-loadable第三方模块实现懒加载；指向路由懒加载需要插件cnpmireact-loadable-SlazyLoad.js封装了一个lazyLoad.js文件;importReactfrom"react";importLoadablefrom"react-loadable";~~~~//import{Toast}from"antd-mobile";//通用延迟加载constloadingComponent=()=>{return(

)}//加载组件通信,exportdefault(loader,loading=loadingComponent)=>{returnLoadable({loader,//需要加载的组件loading})}视图层主文件面.jsimportLazyLoadfrom"./lazyload";exportdefaultclassMainLayoutextendsComponent{render(){return(()}/>import("./guide"))}>import("./login"))}>import("./search"))}/>import("./main"))}/>{/*不存在*/}()}>