1.普通加载
使用vue-cli 构建项目后，我们会在router文件夹下面的index.js 引入相关的路由组建，如：
@ 在cli配置中为src地址
import hello from '@components/hello'
import demo from '@/components/demo'
import slide from '@/components/slide'
这样做的结果就是 webpack 在 build 的时候会打包成一个整的 js 文件，如果页面一多会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载。
2.webpack 的require.ensure()实现按需加载
语法：
==require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)==
- dependencies: 字符串构成的数组，声明callback回调函数中所需的所有模块，模块作为依赖被加载
- callback: 只需加载好全部依赖，webpack就会执行此函数，require函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用require（）来加载依赖。函数体可以使用此参数，来进一步执行require()模块。
- errorCallback: 当webpack加载依赖失败时，会执行此函数。
- chunkName：当require.ensure()创建出的chunk的名字。通过将同一个chunkName 传递给不同的require.ensure()调用,我们可以将它们的代码合并到一个单独的chunk中，从而只产生一个浏览器必须加载的bundle。
使用方法一：
require.ensure([], function(require){
require('./a.js')
})
//此时会单独打包出一个js文件，没有自定义名称的花，会被命名为1.js(有hash时候会带上md5)
使用方法二：
require.ensure(['./a.js'], function(require){
require('./b.js')
})
- 此时a.js作为依赖被加载，但是没有被执行
- a.js和b.js会被打包成一个文件
- 回调函数里只require了b.js，只有b.js的内容会被执行
- 如果你需要使用a.js的内容，需要再加上require('./a.js')
require.ensure(['./list'], function(require){
var list = require('./list')
list.show()
})
vue中使用：
const list = resolve => {
require.ensure([], ()=> {
resolve(require('./list'))
}, 'list')
}
resolve 的作用就是promise里面的那个resolve，在这里就是定义一个异步的组建
三：如何与webpack配合实现组建懒加载
- resolve => require([url], resolve),支持性好
- () => system.import(url),webpack2官网已经声明废除
- () => import(url),webpack2官网推荐使用，属于es7范畴
