webpack中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 是怎么实现异步加载的？

简单点说：

// 先定义一个全局的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官网的异步组件，如下图

image.png

即require.ensure 方法返回的promise的then方法执行时，会调用require('../page/home/home')拿到home组件的编译结果（组件的对象），然后将组件对象作为参数传递给vue提供的resolve方法，这样，vue就拿到了组件的定义，接下来Vue就可以继续执行它的组件渲染逻辑了