webpack懒加载代码原理深究

背景介绍：

我们在实际的开发过程中，vue-router的组件经常这样去写：

{
   
  component: () => import('my/component/path/*.vue')
}

这样写的目的是实现懒加载，也就是当需要该组件的时候才去实际发送请求。我们模拟懒加载，然后分析下构建后的源码

文件准备(文件链接)

a.js

  import('./b.js');

b.js

  console.log("hello");

webpack.config.js

const path = require('path');
module.exports = {
   
	entry: path.resolve(__dirname, 'a.js'),
	devtool: false,
	output: {
   
		path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
	},
	mode: 'none',
}

package.json

{
   
  "name": "wptest",
  "version": "1.0.0",
  "description": "",
  "main": "a.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

执行构建命令npm run dev即可在dist文件下查看到构建后的代码

代码分析

我们从入口main.js代码中进行分析（下面这行代码可以暂时先不看，等到看完整个文章在回来看~）

/******/ (function(modules) {
    // webpackBootstrap
// install a JSONP callback for chunk loading
function webpackJsonpCallback(data) {
   
	var chunkIds = data[0];
	var moreModules = data[1];
/******/
/******/
	// add "moreModules" to the modules object,
	// then flag all "chunkIds" as loaded and fire callback
	var moduleId, chunkId, i = 0, resolves = [];
	for(;i < chunkIds.length; i++) {
   
		chunkId = chunkIds[i];
		if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
   
			resolves.push(installedChunks[chunkId][0]);
		}
		installedChunks[chunkId] = 0;
	}
	for(moduleId in moreModules) {
   
		if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
   
			modules[moduleId] = moreModules[moduleId];
		}
	}
	if(parentJsonpFunction) parentJsonpFunction(data);
/******/
	while(resolves.length) {
   
		resolves.shift()();
	}
/******/
};
/******/
/******/
// The module cache
var installedModules = {
   };
/******/
// object to store loaded and loading chunks
// undefined = chunk not loaded, null = chunk preloaded/prefetched
// Promise = chunk loading, 0 = chunk loaded
var installedChunks = {
   
	0: 0
};
/******/
/******/
/******/
// script path function
function jsonpScriptSrc(chunkId) {
   
	return __webpack_require__.p + "" + ({
   }[chunkId]||chunkId) + ".js"
}
/******/
// The require function
function __webpack_require__(moduleId) {
   
/******/
	// Check if module is in cache