vue路由懒加载
    一 、为什么要使用懒加载
        可以加载页面更快，给客户更好的体验。

    二、使用懒加载 
        常用的懒加载有两种方法：vue异步组件和ES中的import。

1.不使用懒加载
			import Vue from 'vue'
            import Router from 'vue-router'
            import Login from './../pages/Login/Login'             
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component:Login,
                    }
                ]
            })

2.vue异步组件实现懒加载
 			import Vue from 'vue'
            import Router from 'vue-router'          
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component: resolve => (require(['./../pages/Login/Login'], resolve)),
                    }
                ]
            })

3.ES提出的import方法
 			import Vue from 'vue'
            import Router from 'vue-router'
            const Login= () => import ('./../pages/Login/Login')
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component: Login,
                    }
                ]
            })

vue 路由懒加载

{
  path: '/',
  name: 'test',
  component: () => import('./test')
},

路由懒加载：按需加载路由，加快启动速度，路由切换速度会有影响，在大量路由的项目中可以使用，优化项目启动速度。

Vue路由懒加载
对于SPA单页应用，当打包构建时，JavaScript包会变得非常大，影响页面加载速度，将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这就是路由的懒加载。
实现方式
Vue异步组件
Vue允许以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
Vue.component("async-example", function (resolve, reject) {
  setTimeout(function() {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: "<div>I am async!</div>"
    })
  }, 1000)
})

这个工厂函数会收到一个resolve回调，这个回调函数会在你从服务器得到组件定义的时候被调用，当然也可以调用reject(reason)来表示加载失败，此处的setTimeout仅是用来演示异步传递组件定义用。将异步组件和webpack的code-splitting功能一起配合使用可以达到懒加载组件的效果。
Vue.component("async-webpack-example", function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  // 自动将你的构建代码切割成多个包，这些包
  // 会通过 Ajax 请求加载
  require(["./my-async-component"], resolve)
})

也可以在工厂函数中返回一个Promise，把webpack 2和ES2015语法加在一起。
Vue.component(
  "async-webpack-example",
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import("./my-async-component")
)

事实上我们在Vue-Router的配置上可以直接结合Vue的异步组件和Webpack的代码分割功能可以实现路由组件的懒加载，打包后每一个组件生成一个js文件。
{
  path: "/example",
  name: "example",
  //打包后，每个组件单独生成一个chunk文件
  component: reslove => require(["@/views/example.vue"], resolve)
}

动态import
在Webpack2中，可以使用动态import语法来定义代码分块点split point，官方也是推荐使用这种方法，如果使用的是Bable，需要添加syntax-dynamic-import插件， 才能使Babel可以正确的解析语法。
//默认将每个组件，单独打包成一个js文件
const example = () => import("@/views/example.vue")

有时我们想把某个路由下的所有组件都打包在同一个异步块chunk中，需要使用命名chunk一个特殊的注释语法来提供chunk name，需要webpack > 2.4。
const example1 = () => import(/* webpackChunkName: "Example" */ "@/views/example1.vue");
const example2 = () => import(/* webpackChunkName: "Example" */ "@/views/example2.vue");

事实上我们在Vue-Router的配置上可以直接定义懒加载。
{
  path: "/example",
  name: "example",
  //打包后，每个组件单独生成一个chunk文件
  component: () => import("@/views/example.vue")
}

webpack提供的require.ensure
使用webpack的require.ensure，也可以实现按需加载，同样多个路由指定相同的chunkName也会合并打包成一个js文件。
// require.ensure(dependencies: String[], callback: function(require), chunkName: String)
{
    path: "/example1",
    name: "example1",
    component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
},
{
    path: "/example2",
    name: "example2",
    component: resolve => require.ensure([], () => resolve(require("@/views/example2.vue")), "Example")
}

每日一题
https://github.com/WindrunnerMax/EveryDay

参考
https://zhuanlan.zhihu.com/p/46843949
https://www.jianshu.com/p/c27b1640a01b
https://juejin.im/post/6844904025746309127
https://juejin.im/post/6844904013842874376
https://segmentfault.com/a/1190000011519350
https://cn.vuejs.org/v2/guide/components-dynamic-async.html
https://router.vuejs.org/zh/guide/advanced/lazy-loading.htm

为什么需要路由懒加载？



使用懒加载前
import Vue from 'vue'
import Router from 'vue-router'
import find from "../common/find.vue"
import my from "../common/my"
import friend from "../common/friend"
import message from "../common/message"
import unLogin from "../components/unLogin"
import error from "../common/error"
import searchResult from "../common/searchResult"
Vue.use(Router)
export default new Router({
    mode: 'history',
    routes:[
        {
            path:'*',
            component:error,
            meta: {allowBack: false} 
         },
        {
            path: '/',
            name: 'mes',
            component: find,
            meta: {allowBack: false} 
        },
        {
            path: '/my',
            name: 'mes',
            component: my,
             meta: {allowBack: false} 
        },
        {
            path: '/friend',
            name: 'mes',
            component: friend,
            meta: {allowBack: false} 
        },
        {
            path: '/message',
            name: 'mes',
            component: message,
            meta: {allowBack: false} 
        },
        {
            path: '/unLogin',
            name: 'mes',
            component: unLogin,
            meta: {allowBack: false} 
        },
        {
            path: '/search',
            name: 'mes',
            component: searchResult
        }
    ]
})

使用懒加载
import Vue from 'vue'
import Router from 'vue-router'
const find = ()=>import('../common/find.vue')//会动态加载组件
const my = ()=>import('../common/my')
const friend = ()=>import('../common/friend')
const message = ()=>import('../common/message.vue')
const unLogin = ()=>import('../components/unLogin')
const error = ()=>import('../common/error.vue')
const searchResult = ()=>import('../common/searchResult.vue')

Vue.use(Router)
export default new Router({
    mode: 'history',
    routes:[
        {
            path:'*',
            component:error,
            meta: {allowBack: false} 
         },
        {
            path: '/',
            name: 'mes',
            component: find,
            meta: {allowBack: false} 
        },
        {
            path: '/my',
            name: 'mes',
            component: my,
             meta: {allowBack: false} 
        },
        {
            path: '/friend',
            name: 'mes',
            component: friend,
            meta: {allowBack: false} 
        },
        {
            path: '/message',
            name: 'mes',
            component: message,
            meta: {allowBack: false} 
        },
        {
            path: '/unLogin',
            name: 'mes',
            component: unLogin,
            meta: {allowBack: false} 
        },
        {
            path: '/search',
            name: 'mes',
            component: searchResult
        }
    ]
})