[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"topics",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","luyufa","page",1,"limit",20,"total","id","24881","avatar_url","https://avatars1.githubusercontent.com/u/11440825?v=4","githubUsername","create_at","2016-09-22 02:24:51.372","score",35,"topic_count",0,"reply_count",7,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":34,"_31":50,"_51":52,"_25":53,"_54":55},"22479","author_id","21204","tab","share","content","## webpack异步加载的原理\r\n\r\nwebpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这\r\n个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个\r\n模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。\r\n\r\n场景分析:\r\n\r\n比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是\r\n我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的，假设为\r\n1m，于是就造成了我们首页打包的js非常大，用户打开首页的时间就比较长了。\r\n\r\n有没有什么好的解决方法呢？\r\n\r\n**解决1**\r\n\r\n既然打包成同一个js非常大的话，那么我们完全可以把百度地图js分类出去，利用浏览器的并发请求\r\njs文件处理，这样的话，会比加载一个js文件时间小得多。嗯，这也是个不错的方案。为baidumap.js\r\n配置一个新的入口就行了，这样就能打包成两个js文件，都插入html即可（如果baidumap.js被多个\r\n入口文件引用的话，也可以不用将其设置为入口文件，而且直接利用CommonsChunkPlugin,导出到一个\r\n公共模块即可）可以参考我之前文章\r\n[webpack模块打包](https://github.com/yongningfu/webpack_package)\r\n\r\n那还有没有更好的解决方案呢？\r\n\r\n**解决2**\r\n\r\n当然还是有的！我们细想，百度地图是用户点击了才弹出来的，也就是说，这个功能是可选的。那么解决\r\n方案就来了，能不能在用户点击的时候，我在去下载百度地图的js.当然可以。那如何实现用户点击的时候\r\n再去下载百度地图的js呢？于是，我们可以写一个按钮的监听器\r\n\r\n```js\r\nmapBtn.click(function() {\r\n //获取文档head对象\r\n var head = document.getElementsByTagName('head')[0];\r\n //构建