浅谈 Webpack 背后的运行机制

这段代码开始执行，把异步加载相关的 chunk id 与模块传给 push 函数。而前面已经提到过， window["webpackJsonp"] 数组的 push 函数已被重写为 webpackJsonpCallback 函数，它的定义位置在 webpackBootstrap 中：

function webpackJsonpCallback(data) { 
var chunkIds = data[0]; 
var moreModules = data[1]; 
// then flag all "chunkIds" as loaded and fire callback 
var moduleId, chunkId, i = 0, resolves = []; 
// 将 chunk 标记为已加载 
for(;i < chunkIds.length; i++) { 
chunkId = chunkIds[i]; 
if(installedChunks[chunkId]) { 
resolves.push(installedChunks[chunkId][0]); 
} 
installedChunks[chunkId] = 0; 
} 
// 把 "moreModules" 加到 webpackBootstrap 中的 modules 闭包变量中。 
for(moduleId in moreModules) { 
if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) { 
modules[moduleId] = moreModules[moduleId]; 
} 
} 
// parentJsonpFunction 是 window["webpackJsonp"] 的原生 push 
// 将 data 加入全局数组，缓存 chunk 内容 
if(parentJsonpFunction) parentJsonpFunction(data); 
// 执行 resolve 后，加载 chunk 的 promise 状态变为 resolved，then 内的函数开始执行。 
while(resolves.length) { 
resolves.shift()(); 
} 
}; 

走进这个函数中，意味着异步加载的 chunk 内容已经拿到，这个时候我们要完成两件事，一是让依赖这次异步加载结果的模块继续执行，二是缓存加载结果。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!