require.ensure（）异步加载的妙用~懒加载

概念
require.ensure（）相信大家都见过。有人称它为异步加载，也有人说做代码切割，其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个
模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件

场景分析
比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的，假设为1m，于是就造成了我们首页打包的js非常大，用户打开首页的时间就比较长了。

require.ensure（）的原理

mapBtn.click(function() {
  //获取 文档head对象
  var head = document.getElementsByTagName('head')[0];
  //构建 <script>
  var script = document.createElement('script');
  //设置src属性
  script.async = true;
  script.src = "http://map.baidu.com/.js"
  //加入到head对象中
  head.appendChild(script);})

可以在点击的时候，才加载百度地图，等百度地图加载完成后，在
利用百度地图的对象去执行操作。
require.ensure的原理就是把一些js模块给独立出一个个js文件，然后需要用到的时候，在创建一个script对象，加入到document.head对象中即可，浏览器会自动帮我们发起请求，去请求这个js文件，在写个回调，去定义得到这个js文件后，需要做什么业务逻辑操作。

require.ensure()的三个参数

var sync = require('syncdemo.js')   //下面ensure里面也用到
mapBtn.click(function() {
require.ensure([], function() {
var baidumap = require('./baidumap.js')
 //baidumap.js放在我们当前目录下
    var sync = require('syncdemo.js') 
     //这个不会独立出去，因为它已经加载到模块缓存中了})})

1.第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖
2.第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它;
3.第三个参数errorCallback比较好理解，就是处理错误的回调;
4.第四个参数chunkName则是指定打包的组块名称。

第一个参数是什么意思呢？[], 其实就是 当前这个 require.ensure所依赖的其他 异步加载的模块。你想啊？如果A 和 B都是异步加载的，B中需要A，那么B下载之前，是不是先要下载A啊？，所以ensure的第一个参数[]
也是请求下载的模块，如果想加载A require.ensure([‘A.js’],function) 即可