路由懒加载

---

问题:

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

TIP

因为像vue这种的单页面应用，如果没有使用懒加载的话，运用webpack打包后的文件会变得非常的大，会造成进入首页时需要一下子 加载过多的内容，也就会出现首页白屏等待的情况，即使我们使用loading进行优化也不利于用户体验。运用懒加载则可以将页面进行划分， 按需加载页面，分担首页承受的加载的压力。

vue异步组件技术(异步加载)

{path:'/home' , name:'Home' , component:resolve=>(['@/page/home/Home'] , resolve)}

Demo

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const route = new Router({
  routes:[
    {
      path:'/',
      name:'home',
      component:resolve => require(['@/page/home/home'],resolve),
      children:[
        {
          path: '/vuex',
          name: 'vuex',
          component: resolve => require(['@/page/vuex/vuex'] , resolve)
        },
      ]
    },
  ]
})
export default route;

import

// {  path:'/',  name:'Home',  component:()=>import("@/page/home/home") }  

demo

   import Vue from 'vue'
   import Router from 'vue-router'
   Vue.use(Router)
   // 或者：
    function loadRouter(view) {
        return ()=> import(`@/page/vuex/${view}.vue`)
    }
   
   const route = new Router({
     routes:[
       {
         path:'/',
         name:'home',
         component:()=> import("@/page/home/home")
         children:[
           {
             path: '/vuex',
             name: 'vuex',
             // component: ()=> import("@/page/vuex/vuex")
                component:loadRouter('vuex')   // 在外面写一个方法
           },
         ]
       },
     ]
   })
   export default route;

懒加载总结

路由和组件的常用两种懒加载方式：

1、vue异步组件实现路由懒加载

　　component:resolve=>(['需要加载的路由的地址',resolve])

2、es提出的import(推荐使用这种方式)

const HelloWorld = ()=>import('需要加载的模块地址')

补充

• 路由懒加载和组件懒加载都是一种优化方式
• 组件懒加载

component:resolve=>(['@/page/home/Home'] , resolve)} 

component:()=>import("@/page/home/home")