react路由懒加载和vue路由懒加载

懒加载也就是延迟加载或者按需加载，即在需要的时候进行加载。

像vue这种单页面应用以及react项目组件渲染，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时；

vue懒加载(router.js):

//vue里面的vue-router生态里面，实现路由的懒加载的时候，通过设置实例化VueRouter来定义路由对象
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

通过设置路由集合,将组件和路由一一映射~~~~

const routes = [
  根路径
  {
    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" }
      }
    ]
  },

  //登录页面路由
  {
    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")
  },
  //重定向
  {
    path: '*',
    redirect: {
      name: 'guide'
    }
  }
]

//定义路由对象
const router = new VueRouter({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes
})
//暴露  接口
export default router

react懒加载:

通过使用react-loadable的第三方模块，实现懒加载;
指向路由懒加载需要下插件cnpm i react-loadable -S

lazyLoad.js

封装一个lazyLoad.js文件;

import React from "react";
import Loadable from "react-loadable";~~~~

//  import {Toast} from "antd-mobile";
//通用的懒加载
const loadingComponent = () => {
    return (
        
            loading.....~~~~
        
    )
}
//loading 组件通用,
export default (loader, loading = loadingComponent) => {
    return Loadable({
        loader,   //需要懒加载的组件
        loading
    })         
}

视图层主文件mian.js

import LazyLoad from "./lazyload";

export default class MainLayout extends Component {
    render() {
        return (
            
                
                     ()} />
                    import("./guide"))}>
                    import("./login"))}>
                    import("./search"))} />
                    import("./main"))} />
                    import("./scan"))} />
                    {/* 不存在 */}
                     ()}>
                
            
        )
    }
}

ok了