11111111--临时保存

概述4.2 __webpack_require__.e函数 该函数主要作用就是创建一个<script>标签，然后将chunkId对应的文件通过该标签加载。 源代码如下： 1 __webpack_require__.e = function requireEnsure(chunkId) { 2 var promises = []; 3 4 // JSONP chunk loadin 4.2 __webpack_require__.e函数

该函数主要作用就是创建一个<script>标签，然后将chunkID对应的文件通过该标签加载。

源代码如下：

 1 __webpack_require__.e = function requireEnsure(chunkID) { 2         var promises = []; 3 4 // JsONP chunk loading for JavaScript 5 6 var installedChunkData = installedChunks[chunkID]; 7 if (installedChunkData !== 0) { // 0 means "already installed". 8 9 // a Promise means "currently loading". 10 if (installedChunkData) { 11 promises.push(installedChunkData[2]); 12 } else { 13 // setup Promise in chunk cache 14 var promise = new Promise(function (resolve,reject) { 15 installedChunkData = installedChunks[chunkID] = [resolve,reject]; 16  }); 17 promises.push(installedChunkData[2] = promise); 18 19 // start chunk loading 20 var script = document.createElement(‘script‘); 21 var onScriptComplete; 22 23 script.charset = ‘utf-8‘; 24 script.timeout = 120; 25 if (__webpack_require__.nc) { 26 script.setAttribute("nonce",__webpack_require__.nc); 27  } 28 script.src = JsonpScriptSrc(chunkID); 29 30 // create error before stack unwound to get useful stacktrace later 31 var error = new Error(); 32 onScriptComplete = function (event) { 33 // avoID mem leaks in IE. 34 script.onerror = script.onload = null; 35  clearTimeout(timeout); 36 var chunk = installedChunks[chunkID]; 37 if (chunk !== 0) { 38 if (chunk) { 39 var errorType = event && (event.type === ‘load‘ ? ‘missing‘ : event.type); 40 var realSrc = event && event.target && event.target.src; 41 error.message = ‘Loading chunk ‘ + chunkID + ‘ Failed.\n(‘ + errorType + ‘: ‘ + realSrc + ‘)‘; 42 error.type = errorType; 43 error.request = realSrc; 44 chunk[1](error); 45  } 46 installedChunks[chunkID] = undefined; 47  } 48  }; 49 var timeout = setTimeout(function () { 50 onScriptComplete({type: ‘timeout‘,target: script}); 51 },120000); 52 script.onerror = script.onload = onScriptComplete; 53  document.head.appendChild(script); 54  } 55  } 56 return Promise.all(promises); 57 };

主要做了如下几个事情：

1）判断chunkID对应的模块是否已经加载了，如果已经加载了，就不再重新加载；

2）如果模块没有被加载过，但模块处于正在被加载的过程，不再重复加载，直接将加载模块的promise返回。

为什么会出现这种情况？

例如：我们将index.Js中加载print.Js文件的地方改造为下边多次通过ES6的import加载print.Js文件：

 1 button.onclick = ( 2     e => { 3 4 import(‘./print‘).then( 5 module => { 6 var print = module.default; 7  print(); 8  } 9  ); 10 11 import(‘./print‘).then( 12 module => { 13 var print = module.default; 14  print(); 15  } 16  ) 17  } 18 );

 从上边代码可以看出，当第一import加载print.Js文件时，还没有resolve，就又执行第二个import文件了，而为了避免重复加载该文件，就通过将这里的判断，避免了重复加载。

3）如果模块没有被加载过，也不处于加载过程，就创建一个promise，并将resolve、reject、promise构成的数组存储在上边说过的installedChunks缓存对象属性中。然后创建一个script标签加载对应的文件，加载超时时间是2分钟。如果script文件加载失败，触发reject（对应源码中：chunk[1](error)，chunk[1]就是上边缓存的数组的第二个元素reject），并将installedChunks缓存对象中对应key的值设置为undefined，标识其没有被加载。

4）最后返回promise

注意：源码中，这里返回的是Promise.all(promises)，分析代码发现promises好像只可能有一个元素。可能还没遇到多个promises的场景吧。留待后续研究。

总结

以上是内存溢出为你收集整理的11111111--临时保存全部内容，希望文章能够帮你解决11111111--临时保存所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。