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

问题描述

问 题

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

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

关于require.ensure，文档里说：

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

解决方案

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模块被下载来【并且模块被执行完后】,再接着执行回调函数内容。

这篇关于javascript - webpack require.ensure代码分割时的策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！