`

入口之__webpack_require__.e

 
阅读更多

这个方法适用于通过require.ensure或者import()懒加载的模块

chunk分init chunk,entry chunk,normal chunk

 

init chunk指代不包含runtime代码的chunk,

一般是通过webpack的entry配置的入口

 

entry chunk指代包含runtime代码的chunk,

一般通过commonchunkplugin处理以后的manifest文件就是entry chunk

 

normal chunk,剩下的都是normal chunk了,比如通过require.ensure加载的模块

 

ugly,竟然init chunk是配置的入口文件,而不是entry chunk

 

runtime代码指有关webpack定义的代码

 参考:https://www.jianshu.com/p/d01aad3bd584?from=jiantop.com

 

// This file contains only the entry chunk.
/******/ 	// The chunk loading function for additional chunks
/******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
/******/ 		if(installedChunks[chunkId] === 0)
/******/ 			return Promise.resolve();
/******/
/******/ 		// a Promise means "currently loading".
/******/ 		if(installedChunks[chunkId]) {
/******/ 			return installedChunks[chunkId][2];
/******/ 		}
/******/
/******/ 		// setup Promise in chunk cache
/******/ 		var promise = new Promise(function(resolve, reject) {
/******/ 			installedChunks[chunkId] = [resolve, reject];
/******/ 		});
/******/ 		installedChunks[chunkId][2] = promise;
/******/
/******/ 		// start chunk loading
/******/ 		var head = document.getElementsByTagName('head')[0];
/******/ 		var script = document.createElement('script');
/******/ 		script.type = 'text/javascript';
/******/ 		script.charset = 'utf-8';
/******/ 		script.async = true;
/******/ 		script.timeout = 120000;
/******/
/******/ 		if (__webpack_require__.nc) {
/******/ 			script.setAttribute("nonce", __webpack_require__.nc);
/******/ 		}
/******/ 		script.src = __webpack_require__.p + "src/js/" + chunkId + "-" + {"0":"32730f8b347fb3516b62"}[chunkId] + ".js";
/******/ 		var timeout = setTimeout(onScriptComplete, 120000);
/******/ 		script.onerror = script.onload = onScriptComplete;
/******/ 		function onScriptComplete() {
/******/ 			// avoid mem leaks in IE.
/******/ 			script.onerror = script.onload = null;
/******/ 			clearTimeout(timeout);
/******/ 			var chunk = installedChunks[chunkId];
/******/ 			if(chunk !== 0) {
/******/ 				if(chunk) chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
/******/ 				installedChunks[chunkId] = undefined;
/******/ 			}
/******/ 		};
/******/ 		head.appendChild(script);
/******/
/******/ 		return promise;
/******/ 	};

 

 涉及到三种赋值:

1.installedChunks[chunkId] = 0
2.installedChunks[chunkId] = undefined
3.installedChunks[chunkId] = [resolve, reject, promise]

 第一种标识chunk已经通过scrpit标签加载完毕

 第二种标识chunk加载失败了或者说从来没进行过加载

 第三种标识加载进行中,通过promise向外暴露链式操作

分享到:
评论

相关推荐

    Webpack的DllPlugin没有样板代码

    在你提供的`asfktz-autodll-webpack-plugin-92c8e74`压缩包中,可能包含了这个插件的源码或示例。AutodllWebpackPlugin能够自动识别项目中的第三方库并创建DLL,减少了手动配置的复杂性。 通过以上步骤,我们可以...

    9102年webpack4搭建vue项目的方法步骤

    在本文中,我们将详细介绍如何在9102年使用webpack4来搭建一个Vue项目。Webpack 是一个模块打包工具,它将各种资源(如JavaScript、CSS、图片等)视为模块,然后根据依赖关系进行静态分析,生成对应的静态资源。Vue...

    Vue中android4.4不兼容问题的解决方法

    这条命令会将babel-polyfill添加到项目的依赖中,并更新***e.json文件,其中会包含如下依赖信息: ``` "babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1", ``` 2. 在项目的入口文件main.js中引入babel-...

    VueCli3构建TS项目的方法步骤

    项目中的`src`目录包含了主要的源代码,包括`App.vue`(主组件)、`main.ts`(应用入口)、`router.ts`(路由配置)、`store.ts`(Vuex状态管理)。`src/assets` 存放静态资源,`src/components` 存放可复用的Vue...

Global site tag (gtag.js) - Google Analytics