require.ensure:代码分割、按需加载


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的命名方式命名。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值