vue-router 懒加载

懒加载：也叫延迟加载，即在需要的时候进行加载，按需加载。 那vue 为什么需要懒加载呢？ 使用 vue-cli构建的项目，在默认情况下，执行 npm run build  会将所有的 js代码打包为一个整体，这个文件会异常的大，可能是几兆或者是十几兆，加载得会很慢，所以我们需要分模块打包，把不同路由对应的组件分割成不同的代码块。把我们想要组合在一起的组件打包到一个 chunk块中去，相同 chunk名字的模块将会打包到一起。然后当路由被访问的时候才加载对应的组件，这样就更高效了。

以前的引用组件的方式可能是这样：

 import Vue from 'vue'
 import Router from 'vue-router'
 
 // 引入vue组件
 import Manage from '@/page/admin/Manage'
 import Login from '@/page/admin/Login'

通过webpack提供的require.ensure()技术引用，实现懒加载

 const Login= r => require.ensure([], () => r(require('@/page/admin/Login')), 'chunkName1');
 const Manage = r => require.ensure([], () => r(require('@/page/admin/Manage')), 'chunkName2');

最后将组件配置到路由中

 export default new Router({
     routes:[{
        path: '/',
        name: 'Login',
        component: Login  // vue组件
     },
     {
       path: '/Manage',
       name: 'Manage',
       component: Manage,
     }
 })

vue-router 官方是通过import() 的方式实现懒加载，(需要webpack > 2.4)，详细参照官方文档：

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html