webpack异步加载原理

​ webpack ensure是什么？有人称它为异步加载，也有人称它为代码切割。假如一个场景：某个应用的首页上有个按钮，点击此按钮将会打开某个地图（需要用到百度地图的js文件），而百度地图的js文件是非常大的，如果一开始就把它打包进首页的话，就会使得用户打开首页的时间变得比较长。

​ 在这种情况下，有一种解决方法是，先不打包该js文件，而是在需要用到时（本例中点击按钮时）才去加载。这就可以利用webpack中的webpack 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')  //这个不会独立出去，因为它已经加载到模块缓存中了
  })
})

​ 其中syncdemo.js 是在webpack ensure外加载的，所以它其实是同步加载，之后的再次引入是使用的缓存。webpack ensure 有两个参数，第二个参数就是回调函数，使用它来请求模块。第一个参数[] 中存放的是这个webpack ensure 加载所依赖的模块，注意：依赖模块和异步模块将会打包到同一个js文件中，这样可能就会导致重复打包的问题。