vue路由懒加载

实现vue路由懒加载的几种方式

[1]const home = r => require.ensure([], () => r(require('../home')), 'home')
webpack 1.X 用的多
[2]. const Hello = ()=> import('./hello')
webpack>2.4
注意当调用 ES6 模块的 import() 方法（引入模块）时，必须指向模块的 .default 值，因为它才是 promise 被处理后返回的实际的 module 对象
需要配合babel的syntax-dynamic-import插件
这是vue-router 官方文档提供的方法
查询资料时发现，这种写法如果项目有几十个页面，页面热更新速度慢。
可以使用babel 的 plugins babel-plugin-dynamic-import-node。
它只做一件事就是将所有的import()转化为require()，这样就可以用这个插件将所有异步组件都用同步的方式引入
[3].resolve => require(['../components/PromiseDemo'], resolve)
CommonJS AMD风格的require

分割层级

Vue代码分割懒加载包含如下几个层级:
1、 组件层级分割懒加载
2、 router路由层级（常用）
3、 Vuex 模块