深入理解webpack打包机制
发布时间：2020-12-24 13:19:04 所属栏目：创业 来源：网络整理
导读：副标题#e# 一、单入口文件如何打包 /src/single/index.js index2 = require( util = require(console.log(index2); console.log(util); /src/single/index2.js util = require(= ; /src/single/util.js module.exports = ; /config/webpack.config.single.j
|
首先使用 installedChunks 来保存每个 chunkId 是否被加载过，如果被加载过，则说明该 chunk 中所包含的模块已经被放到了 modules 中，注意是 modules 而不是 installedModules。我们先来简单看一下 vendor chunk 打包出来的内容。 webpackJsonp([module.exports = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">;}) 在执行完 manifest 后就会先执行 vendor 文件，结合上面 webpackJsonp 的定义，我们可以知道 [3] 代表 chunkId，当加载到 vendor 文件后，installedChunks[3] 将会被置为 0，这表明 chunk3 已经被加载过了。 webpack如何加载异步脚本： __webpack_require__.e = installedChunkData =(installedChunkData === </span><span style="color: #008000">//</span><span style="color: #008000"> a Promise means "currently loading".</span>
<span style="color: #0000ff">if</span><span style="color: #000000">(installedChunkData) {
</span><span style="color: #0000ff">return</span> installedChunkData[<span style="color: #800080">2</span><span style="color: #000000">];
}
</span><span style="color: #008000">//</span><span style="color: #008000"> setup Promise in chunk cache</span>
<span style="color: #0000ff">var</span> promise = <span style="color: #0000ff">new</span><span style="color: #000000"> Promise(function(resolve,<span style="color: #800080">120000</span><span style="color: #000000">);
script.onerror </span>= script.onload =<span style="color: #000000"> onScriptComplete;
function onScriptComplete() {
</span><span style="color: #008000">//</span><span style="color: #008000"> avoid mem leaks in IE.</span>
script.onerror = script.onload = <span style="color: #0000ff">null</span><span style="color: #000000">;
clearTimeout(timeout);
</span><span style="color: #0000ff">var</span> chunk =<span style="color: #000000"> installedChunks[chunkId];
</span><span style="color: #0000ff">if</span>(chunk !== <span style="color: #800080">0</span><span style="color: #000000">) {
</span><span style="color: #0000ff">if</span><span style="color: #000000">(chunk) {
chunk[</span><span style="color: #800080">1</span>](<span style="color: #0000ff">new</span> Error(<span style="color: #800000">'</span><span style="color: #800000">Loading chunk </span><span style="color: #800000">'</span> + chunkId + <span style="color: #800000">'</span><span style="color: #800000"> failed.</span><span style="color: #800000">'</span><span style="color: #000000">));
}
installedChunks[chunkId] </span>=<span style="color: #000000"> undefined;
}
};
head.appendChild(script);
</span><span style="color: #0000ff">return</span><span style="color: #000000"> promise;
};</span></pre> （编辑：网站开发网_盐城站长网 ） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
