## webpack异步加载的原理 webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。场景分析: 比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的，假设为 1m，于是就造成了我们首页打包的js非常大，用户打开首页的时间就比较长了。有没有什么好的解决方法呢？ **解决1** 既然打包成同一个js非常大的话，那么我们完全可以把百度地图js分类出去，利用浏览器的并发请求 js文件处理，这样的话，会比加载一个js文件时间小得多。嗯，这也是个不错的方案。为baidumap.js 配置一个新的入口就行了，这样就能打包成两个js文件，都插入html即可（如果baidumap.js被多个入口文件引用的话，也可以不用将其设置为入口文件，而且直接利用CommonsChunkPlugin,导出到一个公共模块即可）可以参考我之前文章 [webpack模块打包](https://github.com/yongningfu/webpack_package) 那还有没有更好的解决方案呢？ **解决2** 当然还是有的！我们细想，百度地图是用户点击了才弹出来的，也就是说，这个功能是可选的。那么解决方案就来了，能不能在用户点击的时候，我在去下载百度地图的js.当然可以。那如何实现用户点击的时候再去下载百度地图的js呢？于是，我们可以写一个按钮的监听器 ```js mapBtn.click(function() { //获取文档head对象 var head = document.getElementsByTagName('head')[0]; //构建