懒加载：也叫延迟加载，即在需要的时候进行加载，按需加载。 那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