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文件中,这样可能就会导致重复打包的问题。