webpack在编译时,会静态地解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,这个新的chunk会被webpack通过jsonp来按需加载。
语法:
require.ensure(
[dependencies1, dependencies2],
callback: function(require) {
require(...)
},
'chunkName'
)
上个dva/router的例子:
<Route path="managesearch"
getComponent={(location, cb) => {
require.ensure([组件1], function(require) {
cb(null, require('组件path').default);
}, 'chunkName');
}} />
dependencies
字符串数组,在回调函数被执行前,将所有需要用到的模块进行声明。
callback
当所有dependencies都加载完成后,执行callback,在这个callback中可以进一步require模块。
chunkName
给require.ensure打包的模块命名,对应webpack的output中的chunkFilename,打包的文件会以webpack中chunkFilename的命名方式命名,而没有通过require.ensure打包的模块是以webpack中filename的命名方式命名。