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 (
        <div>
            loading.....~~~~
        </div>
    )
}
//loading 組件通用,
export default (loader, loading = loadingComponent) => {
    return Loadable({
        loader,   //須要懶加載的組件
        loading
    })         
}

視圖層主文件mian.js

import LazyLoad from "./lazyload";

export default class MainLayout extends Component {
    render() {
        return (
            <div className="main">
                <Switch>
                    <Route path="/" exact render={() => (<Redirect to="/guide" />)} />
                    <Route path="/guide" component={LazyLoad(()=>import("./guide"))}></Route>
                    <Route path="/login" component={LazyLoad(()=>import("./login"))}></Route>
                    <Route path="/search" component={LazyLoad(()=>import("./search"))} />
                    <Route path="/main" component={LazyLoad(()=>import("./main"))} />
                    <Route path="/scan" component={LazyLoad(()=>import("./scan"))} />
                    {/* 不存在 */}
                    <Route render={() => (<Redirect to="/guide" />)}></Route>
                </Switch>
            </div>
        )
    }
}

ok了