我们写的 require.ensure 会被打包成什么样子？
首先，让我们先看看你在代码中用require.ensure，webpack会将这段代码打包成什么样子
require.ensure([], function () {
let module2 = require("./module2")
console.log(module2)
});
会被webpack编译为下面这样
// 这里的参数0 其实就是module2生成代码块之后的id
__webpack_require__.e( /*! require.ensure */ 0)
.then((function () {
let module2 = __webpack_require__( /*! ./module2 */ "./module2.js")
console.log(module2)
})
...//后面代码省略，主要是做异常处理
__webpack_require__.e 其实就是返回一个promise，你传递给require.ensure函数的第二个参数，其实就是个promise的回调函数，在里面是可以拿到异步加载的模块module2
__webpack_require__ 其实相当于是 require方法，主要是拿到异步加载的模块，这里就是module2了
require.ensure 是怎么实现异步加载的？拿到 promise的？
简单点说：
// 先定义一个全局的array对象
widow.webpackJsonp = []
// 重写这个的push方法
webpackJsonp.push = webpackJsonpCallback;
function webpackJsonpCallback(data) {
var chunkIds = data[0];
var moreModules = data[1];
var executeModules = data[2];
var moduleId, chunkId, i = 0,
resolves = [];
for (; i < chunkIds.length; i++) {
chunkId = chunkIds[i];
if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
// __webpack_require__.e 函数中创建 promise 时，
// 会把 installedChunks[chunkId] = [resolve, reject];
// 所以这里的installedChunks[chunkId][0]实际就是 promise.resolve 方法啦
resolves.push(installedChunks[chunkId][0]);
}
// 加载成功后 把 installedChunks[chunkId] 赋值为0，用来判断当前模块是否加载成功，
// script.onload 的时候也会用来判断是否加载失败，显示提示信息
installedChunks[chunkId] = 0;
}
while (resolves.length) {
resolves.shift()();
}
...
};
__webpack_require__.e = function (chunkId) {
var promises = [];
// 从安装完的代码模块（installedChunks）中拿到当前要加载的模块
var installedChunkData = installedChunks[chunkId];
if (installedChunkData !== 0) { // 0 表示加载成功了已经
// 创建一个promise 然后把 resolve 和 reject 存储进数组
var promise = new Promise(function (resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(promise);
// 创建一个script标签
var script = document.createElement('script');
// 设置请求地址
script.src = chunkId + ".bundle.js";
// 监听脚本加载成功和失败事件
script.onerror = script.onload = function (event) {
// 加载完成后取出模块
var chunk = installedChunks[chunkId];
// 如果加载成功 chunk 会为 0
// 如果加载失败那么提示用户加载失败了
if (chunk !== 0) {
// 这里的 chunk[1] 实际上是 promise 的 reject 函数
var error = {
message: 'Loading chunk ' + chunkId + ' failed.';
}
chunk[1](error);
}
};
// 标签插入DOM
document.head.appendChild(script);
}
return Promise.all(promises);
}
module2.js 打包后
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
/***/ "./module2.js":
/*!********************!*\
!*** ./module2.js ***!
\********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("module.exports = function () {\n console.log('哈哈哈哈')\n}\n\n//# sourceURL=webpack:///./module2.js?");
/***/ })
}]);
实现步骤解析
- 1 创建一个
promise将[resolve, reject]存入installedChunks[chunkId]
var promise = new Promise(function (resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
- 2 创建一个
script标签， 设置其src为真实的请求地址，去加载这个模块，给script标签绑定onload事件处理函数，方便处理加载失败的情况 - 3
module2.js加载后，实际上是一个调用webpackJsonp的push方法，因为push方法被重写为webpackJsonpCallback；故push方法调用时会调用webpackJsonpCallback - 4
webpackJsonpCallback执行时，拿到调用push方法时传递的chunkId，将这个模块的加载成功状态设置为0
installedChunks[chunkId] = 0;
- 5 从
installedChunks中取出chunkId对应模块的resolve方法，执行后拿到组件了
Vue中使用 require.ensure
const home = r => require.ensure([], () => r(require('../page/home/home')), 'home')
其实可以改写为const home = resolve => require.ensure([], () => resolve(require('../page/home/home')), 'home')
为什么要这么写？因为这个是vue异步组件的语法，可以看vue官网的异步组件，如下图
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
即require.ensure 方法返回的promise的then方法执行时，会调用require('../page/home/home')拿到home组件的编译结果（组件的对象），然后将组件对象作为参数传递给vue提供的resolve方法，这样，vue就拿到了组件的定义，接下来Vue就可以继续执行它的组件渲染逻辑了
欢迎关注我的个人公众号「「小枫学幽默」」一起成长，一起分享生活！！
