webpack require.ensure代码分割时的策略

最近在看webpack的文档,在代码分割code splitting这一章节有点疑惑。

http://webpack.github.io/docs...

关于require.ensure,文档里说:

clipboard.png

这里的evaluate怎么理解呢,是指的执行吗?但webpack打包文件本来就不会去执行文件的js代码,所以想请教下,require.ensure以及require.include除了会有分割点,其他的策略和正常的require有什么不同吗?

阅读 3.7k
1 个回答

require.ensure举例:
commonjs规范

//预加载 懒执行
require.ensure(['./mod.js'], function(require){//这里数组里是要预加载的模块,不写不会先下载 
    var mod = require('./mod.js');
    mod.show();
});

上面的例子中,执行到这句代码时,mod,js会被浏览器下载(预加载),也就是上面英文写的only loads the modules,但是这个mod.js的内容不会被立即执行(懒执行),也就是上面说的it doesn't evaluate them


require.include
这个是webpack自带的,没有任何规范

require.ensure([], function(require){
    require.include('./mod.js');//此处只加载不执行
});

它实现的功能和ensure一样,省去了让你在数组[]里写上模块名称的麻烦


最后你还可以使用AMD规范的写法

require(['./modt'], function(mod){
    mod.show();
});

最后扯一下AMD和require.ensure的区别

require.ensure模块被下载来后【不立即执行】,接着执行回调函数内容。
AMD模块被下载来【并且模块被执行完后】,再接着执行回调函数内容。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题