背景：
本人最近在做公司一个移动端的项目，设备系统是比较老的andorid7.1，所以性能就一般；既然设备性能不咋地，那就更需要在性能上优化，使用公司的脚手架本来以为路由是默认懒加载的，进去咋一看，好家伙原来是非懒加载模式.....那就自己搞下咯~
先来看下官网是怎么说的：
概况一下就是：如果你的项目太大，到时候打出的app.js包会无比的大，加载时间会很长，导致你写的项目在启动时首页白屏时间很长（特别是网络环境不好以及老设备上，你会深有体会），用户体验极其不好！
非懒加载会在工程打包时全部打入一个js文件中，在页面初始化时进行全部加载
看下非懒加载写法：
import Bar from './views/Bar.vue
routes = [
{
name: 'bar',
path: '/bar',
component: Bar
}
]
非懒加载打包文件全部在一个app.js文件中
路由懒加载：
1、ES6的import()方法（官网推荐）： 使用import可进行组件按需加载，并可指定webpackChunkName进行打包代码按组分块
没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
指定了相同的webpackChunkName，会合并打包成一个js文件。
const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
2、vue异步组件resolve： 主要使用了resolve的异步机制，用require代替了import，实现按需加载：
const 组件名 = resolve = require(['组件路径'], resolve)
const home = resolve => require(['../view/home'],resolve)
3、webpack提供的require.ensure()实现懒加载
说明：
1、多个路由时可指定相同的chunkName合并打包成一个js文件
2、第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
3、第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一 起，这样就生成了两个chunk,第一次加载时只加载主文件。
4、第三个参数是错误回调。（可选）
5、第四个参数是单独打包的chunk的文件名（可选，不传时打包命名采用哈希）
// 使用require.ensure()引入模块实现懒加载
const Hello = resolve => require.ensure([], () => resolve(require('@/components/HelloWorld.vue')), 'hello')
// 指定相同的chunkName名可打包成一个文件
const Bar = resolve => require.ensure([], () => resolve(require('@/components/MyBar.vue'), 'test'), 'bar')
const Foo = resolve => require.ensure([], () => resolve(require('@/components/MyFoo.vue'), 'test'), 'foo')
export default new Router({
routes: [
{
path: '/',
redirect: '/hello'
},
{
path: '/hello',
name: 'HelloWorld',
component: Hello
},
{
path: '/bar',
name: 'MyBar',
component: Bar
},
{
path: '/foo',
name: 'Foo',
component: Foo
},
]
})
下面以ensure为例子看下实际效果：
看打包过后的文件，相对非懒加载多出了动态引入的文件，同一chunkName则合并成同一个js文件；
在进入页面时，重定向到hello页面，此时foo与bar合并的test.js文件是还没有加载的：
在点击切换到foo或者bar时，才请求加载test.js：
