vue-router 懒加载

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

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

1 import Vue from 'vue'
2 import Router from 'vue-router'
3 
4 // 引入vue组件
5 import Manage from '@/page/admin/Manage'
6 import Login from '@/page/admin/Login'

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

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

   最后将组件配置到路由中

 1 export default new Router({
 2     routes:[{
 3        path: '/',
 4        name: 'Login',
 5        component: Login  // vue组件
 6     },
 7     { 
 8       path: '/Manage',
 9       name: 'Manage',
10       component: Manage,
11     }
12 })

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

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

 

转载于:https://www.cnblogs.com/jonathan102/p/9932685.html