webpack_require.e方法

先看__webpack_require__.e方法：

__webpack_require__.e = function requireEnsure(chunkId) {
    var promises = [];
    // 已经加载的chunk
    var installedChunkData = installedChunks[chunkId];
    if (installedChunkData !== 0) { // 0代表已经加载
      // 值非0即代表组件正在加载中，installedChunkData[2]为promise对象
      if (installedChunkData) {
        promises.push(installedChunkData[2]);
      } else {
        // 创建一个promise，并且把两个回调参数缓存到installedChunks对象上
        var promise = new Promise(function (resolve, reject) {
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        // 把promise对象本身也添加到缓存数组里
        promises.push(installedChunkData[2] = promise);
        // 开始发起chunk请求
        var script = document.createElement('script');
        var onScriptComplete;
        script.charset = 'utf-8';
        script.timeout = 120;
        // 拼接chunk的请求url
        script.src = jsonpScriptSrc(chunkId);
        var error = new Error();
        // chunk加载完成/失败的回到
        onScriptComplete = function (event) {
          script.onerror = script.onload = null;
          clearTimeout(timeout);
          var chunk = installedChunks[chunkId];
          if (chunk !== 0) {
            // 如果installedChunks对象上该chunkId的值还存在则代表加载出错了
            if (chunk) {
              var errorType = event && (event.type === 'load' ? 'missing' : event.type);
              var realSrc = event && event.target && event.target.src;
              error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
              error.name = 'ChunkLoadError';
              error.type = errorType;
              error.request = realSrc;
              chunk[1](error);
            }
            installedChunks[chunkId] = undefined;
          } 
        };
        // 设置超时时间
        var timeout = setTimeout(function () {
          onScriptComplete({
            type: 'timeout',
            target: script
          });
        }, );
        script.onerror = script.onload = onScriptComplete;
        document.head.appendChild(script);
      }
    }
    return Promise.all(promises);
  };

这个方法虽然有点长，但是逻辑很简单，首先函数返回的是一个promise，如果要加载的chunk未加载过，那么就创建一个promise，然后缓存到installedChunks对象上，接下来创建script标签来加载chunk，唯一不好理解的是onScriptComplete函数，因为在这里面判断该chunk在installedChunks上的缓存信息不为0则当做失败处理了，问题是前面才把promise信息缓存过去，也没有看到哪里有进行修改，要理解这个就需要看看我们要加载的chunk的内容了：

可以看到代码直接执行了，并往webpackJsonp数组里添加了一项：

window["webpackJsonp"] = window["webpackJsonp"] || []).push([["chunk-1f79b58b"],{..}])

看着似乎也没啥问题，其实window["webpackJsonp"]的push方法被修改过了：

var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
jsonpArray.push = webpackJsonpCallback;
var parentJsonpFunction = oldJsonpFunction;

被修改成了webpackJsonpCallback方法：

function webpackJsonpCallback(data) {
    var chunkIds = data[0];
    var moreModules = data[1];
    var moduleId, chunkId, i = 0,
        resolves = [];
    for (; i < chunkIds.length; i++) {
        chunkId = chunkIds[i];
        if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
            // 把该chunk的promise的resolve回调方法添加到resolves数组里
            resolves.push(installedChunks[chunkId][0]);
        }
        // 标记该chunk已经加载完成
        installedChunks[chunkId] = 0;
    }
    // 将该chunk的module数据添加到modules对象上
    for (moduleId in moreModules) {
        if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            modules[moduleId] = moreModules[moduleId];
        }
    }
    // 执行原本的push方法
    if (parentJsonpFunction) parentJsonpFunction(data);
    // 执行resolve函数
    while (resolves.length) {
        resolves.shift()();
    }
}

这个函数会取出该chunk加载的promise的resolve函数，然后将它在installedChunks上的信息标记为0，代表加载成功，所以在后面执行的onScriptComplete函数就可以通过是否为0来判断是否加载失败。最后会执行resolve函数，这样前面__webpack_require__.e函数返回的promise状态就会变为成功。

让我们再回顾一下AsyncComponent组件的函数：

function AsyncComponent() {
    return __webpack_require__.e( /*! import() */ "chunk-1f79b58b").then(__webpack_require__.bind(null, /*! ./AsyncComponent */ "c61d"));
}

chunk加载完成后会执行__webpack_require__方法。

相关问答

Q1: __webpack_require__方法

这个方法是webpack最重要的方法，用来加载模块：

function __webpack_require__(moduleId) {
    // 检查模块是否已经加载过了
    if (installedModules[moduleId]) {
        return installedModules[moduleId].exports;
    }
    // 创建一个新模块，并缓存
    var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
    };
    // 执行模块函数
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 标记模块加载状态
    module.l = true;
    // 返回模块的导出
    return module.exports;
}

所以上面的__webpack_require__.bind(null, /*! ./AsyncComponent */ "c61d")其实是去加载了c61d模块，这个模块就在我们刚刚请求回来的chunk里：

这个模块内部又会去加载它依赖的模块，最终返回的结果为：

其实就是AsyncComponent的组件选项。

回到createElement方法

回到前面的resolveAsyncComponent方法：

var res = factory(resolve, reject);

现在我们知道这个res其实就是一个未完成的promise，Vue并没有等待异步组件加载完成，而是继续向后执行：

if (isObject(res)) {
    if (isPromise(res)) {
        // () => Promise
        if (isUndef(factory.resolved)) {
            res.then(resolve, reject);
        }
    }
}

return factory.resolved

把定义的resolve和reject函数作为参数传给promise res，最后返回了factory.resolved，这个属性并没有被设置任何值，所以是undefined。

接下来回到createComponent方法：

Ctor = resolveAsyncComponent(asyncFactory, baseCtor);
if (Ctor === undefined) {
    // 返回异步组件的占位符节点，该节点呈现为注释节点，但保留该节点的所有原始信息。
    // 这些信息将用于异步服务端渲染。
    return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
    )
}

因为Ctor是undefined，所以会执行createAsyncPlaceholder方法返回一个占位符节点：

function createAsyncPlaceholder (
  factory,
  data,
  context,
  children,
  tag
) {
  // 创建一个空的VNode，其实就是注释节点
  var node = createEmptyVNode();
  // 保留组件的相关信息
  node.asyncFactory = factory;
  node.asyncMeta = { data: data, context: context, children: children, tag: tag };
  return node
}

最后让我们再回到_createElement方法：

// ...
vnode = createComponent(Ctor, data, context, children, tag);
// ...
return vnode

很简单，对于异步节点，直接返回创建的注释节点，最后把虚拟节点转换成真实节点，会实际创建一个注释节点：

现在让我们来看看resolveAsyncComponent函数里面定义的resolve，也就是当chunk加载完成后会执行的：

var resolve = once(function (res) {d
    // 缓存结果
    factory.resolved = ensureCtor(res, baseCtor);
    // 非同步解析时调用
    // (SSR会把异步解析为同步)
    if (!sync) {
        forceRender(true);
    } else {
        owners.length = 0;
    }
});

res即AsyncComponent的组件选项，baseCtor为Vue构造函数，会把它们作为参数调用ensureCtor方法：

function ensureCtor (comp, base) {
  if (
    comp.__esModule ||
    (hasSymbol && comp[Symbol.toStringTag] === 'Module')
  ) {
    comp = comp.default;
  }
  return isObject(comp)
    ? base.extend(comp)
    : comp
}

可以看到实际上是调用了extend方法：

前面也提到过，Vue会把我们的组件都创建一个对应的构造函数，就是通过这个方法，这个方法会以baseCtor为父类创建一个子类，这里就会创建AsyncComponent子类：

子类创建成功后会执行forceRender方法：

var forceRender = function (renderCompleted) {
    for (var i = 0, l = owners.length; i < l; i++) {
        (owners[i]).$forceUpdate();
    }

    if (renderCompleted) {
        owners.length = 0;
        if (timerLoading !== null) {
            clearTimeout(timerLoading);
            timerLoading = null;
        }
        if (timerTimeout !== null) {
            clearTimeout(timerTimeout);
            timerTimeout = null;
        }
    }
};

owners里包含着App组件实例，所以会调用它的$forceUpdate方法，这个方法会迫使 Vue 实例重新渲染，也就是重新执行渲染函数，进行虚拟DOM的diff和path更新。

所以会重新执行App组件的渲染函数，那么又会执行前面的createElement方法，又会走一遍我们前面提到的那些过程，只是此时AsyncComponent组件已经加载成功并创建了对应的构造函数，所以对于createComponent方法，这次执行resolveAsyncComponent方法的结果不再是undefined，而是AsyncComponent组件的构造函数：

Ctor = resolveAsyncComponent(asyncFactory, baseCtor);

function resolveAsyncComponent (
 factory,
 baseCtor
) {
    if (isDef(factory.resolved)) {
        return factory.resolved
    }
}

接下来就会走正常的组件渲染逻辑：

var name = Ctor.options.name || tag;
var vnode = new VNode(
    ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')),
    data, undefined, undefined, undefined, context,
    { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children },
    asyncFactory
);

return vnode

可以看到对于组件其实也是创建了一个VNode，具体怎么把该组件的VNode渲染成真实DOM不是本文的重点就不介绍了，大致就是在虚拟DOM的diff和patch过程中如果遇到的VNode是组件类型，那么会new一个该组件的实例关联到VNode上，组件实例化和我们new Vue()没有什么区别，都会先进行选项合并、初始化生命周期、初始化事件、数据观察等操作，然后执行该组件的渲染函数，生成该组件的VNode，最后进行patch操作，生成实际的DOM节点，子组件的这些操作全部完成后才会再回到父组件的diff和patch过程，因为子组件的DOM已经创建好了，所以插入即可，更详细的过程有兴趣可自行了解。

以上就是本文全部内容。