本文主要说明Webpack懒加载构建和加载的原理，对构建后的源码进行分析。
一 说明
本文以一个简单的示例，通过对构建好的bundle.js源码进行分析，说明Webpack懒加载构建原理。
本文使用的Webpack版本是4.32.2版本。
注意：之前也分析过Webpack3.10.0版本构建出来的bundle.js，通过和这次的Webpack 4.32.2版本对比，核心的构建原理基本一致，只是将模块索引id改为文件路径和名字、模块代码改为了eval(moduleString)执行的方式等一些优化改造。
二 示例
1）Webpack.config.js文件内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
mode: 'development' // 'production' 用于配置开发还是发布模式
};
2）创建src文件夹，添加入口文件index.js:
function component() {
var element = document.createElement('div');
var button = document.createElement('button');
var br = document.createElement('br');
button.innerHTML = 'Click me and look at the console!';
element.innerHTML = 'Hello webpack'; // _.join(['Hello', 'webpack'], ' ');
element.appendChild(br);
element.appendChild(button);
button.onclick = (
e => {
// 注意：下边的注释不写的话，打包出来的print文件包名就不是print.bundle.js，而是0.bundle.js
import(/* webpackChunkName: "print" */'./print').then(
module => {
var print = module.default;
print();
}
)
}
);
return element;
}
document.body.appendChild(component());
3）在src目录下创建print.js文件：
export default () => {
console.log('Button Clicked: Here\'s "some text"!');
}
4）package.json文件内容：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^0.1.18",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
三 执行构建
执行构建命令：npm run webpack
在dist目录下生成了两个文件：app.bundle.js和print.bundle.js。
app.bundle.js源码如下（下边代码是将注释去掉、压缩的代码还原后的代码）：
(function (modules) {
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 (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 = {
"app": 0
};
// script path function
function jsonpScriptSrc(chunkId) {
return __webpack_require__.p + "" + ({"print": "print"}[chunkId] || chunkId) + ".bundle.js"
}
// The require function
function __webpack_require__(moduleId) {
// Check if module is in cache
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// Flag the module as loaded
module.l = true;
// Return the exports of the module
return module.exports;
}
// This file contains only the entry chunk.
// The chunk loading function for additional chunks
__webpack_require__.e = function requireEnsure(chunkId) {
var promises = [];
// JSONP chunk loading for javascript
var installedChunkData = installedChunks[chunkId];
if (installedChunkData !== 0) { // 0 means "already installed".
// a Promise means "currently loading".
if (installedChunkData) {
promises.push(installedChunkData[2]);
} else {
// setup Promise in chunk cache
var promise = new Promise(function (resolve, reject) {
installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(installedChunkData[2] = promise);
// start chunk loading
var script = document.createElement('script');
var onScriptComplete;
script.charset = 'utf-8';
script.timeout = 120;
if (__webpack_require__.nc) {
script.setAttribute("nonce", __webpack_require__.nc);
}
script.src = jsonpScriptSrc(chunkId);
// create error before stack unwound to get useful stacktrace later
var error = new Error();
onScriptComplete = function (event) {
// avoid mem leaks in IE.
script.onerror = script.onload = null;
clearTimeout(timeout);
var chunk = installedChunks[chunkId];
if (chunk !== 0) {
if (chunk) {
var errorType = event && (event.type === 'load' ? 'missing' : event.type);
var realSrc = event && event.target && event.target.src;
error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
error.type = errorType;
error.request = realSrc;
chunk[1](error);
}
installedChunks[chunkId] = undefined;
}
};
var timeout = setTimeout(function () {
onScriptComplete({type: 'timeout', target: script});
}, 120000);
script.onerror = script.onload = onScriptComplete;
document.head.appendChild(script);
}
}
return Promise.all(promises);
};
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
// expose the module cache
__webpack_require__.c = installedModules;
// define getter function for harmony exports
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {enumerable: true, get: getter});
}
};
// define __esModule on exports
__webpack_require__.r = function (exports) {
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
}
Object.defineProperty(exports, '__esModule', {value: true});
};
// create a fake namespace object
// mode & 1: value is a module id, require it
// mode & 2: merge all properties of value into the ns
// mode & 4: return value when already ns object
// mode & 8|1: behave like require
__webpack_require__.t = function (value, mode) {
if (mode & 1) value = __webpack_require__(value);
if (mode & 8) return value;
if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
var ns = Object.create(null);
__webpack_require__.r(ns);
Object.defineProperty(ns, 'default', {enumerable: true, value: value});
if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
return value[key];
}.bind(null, key));
return ns;
};
// getDefaultExport function for compatibility with non-harmony modules
__webpack_require__.n = function (module) {
var getter = module && module.__esModule ?
function getDefault() {
return module['default'];
} :
function getModuleExports() {
return module;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
// Object.prototype.hasOwnProperty.call
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
// __webpack_public_path__
__webpack_require__.p = "";
// on error function for async loading
__webpack_require__.oe = function (err) {
console.error(err);
throw err;
};
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); // 复制一个数组的push方法，这个方法的this是jsonpArray
jsonpArray.push = webpackJsonpCallback; // TODO: 为什么要复写push，而不是直接增加一个新方法名？
jsonpArray = jsonpArray.slice(); // 拷贝一个新数组
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
({
"./src/index.js": (function (module, exports, __webpack_require__) {
function component() {
var element = document.createElement('div');
var button = document.createElement('button');
var br = document.createElement('br');
button.innerHTML = 'Click me and look at the console!';
element.innerHTML = 'Hello webpack'; // _.join(['Hello', 'webpack'], ' ');
element.appendChild(br);
element.appendChild(button);
button.onclick = (
e => {
__webpack_require__.e("print")
.then(__webpack_require__.bind(null, "./src/print.js"))
.then(
module => {
var print = module.default;
print();
}
)
}
);
return element;
}
document.body.appendChild(component());
})
});
print.bundle.js的源码如下：
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([ // 注意：这个push实际是webpackJsonpCallback方法
["print"],
{
"./src/print.js": (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
__webpack_exports__["default"] = (() => {
console.log('Button Clicked: Here\'s "some text"!');
});
})
}
]);
四 源码解读
说明：懒加载构建和和上一篇的基础构建原理中有很多相同的代码，这里不再重复说明，本文主要详细说明其中增加的懒加载方面的内容。
app.bundle.js是构建好的入口文件，里边就是一个自执行函数，基本结构和上一篇基础构建源码中一致，这里不再详细说明。下边是使用懒加载模块构建后，增加的内容，这里详细说明这些内容：
(function (modules) {
function webpackJsonpCallback(data) {...};
// 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 = {
"app": 0
};
// script path function
function jsonpScriptSrc(chunkId) {...}
// The require function
function __webpack_require__(moduleId) {...}
// This file contains only the entry chunk.
// The chunk loading function for additional chunks
__webpack_require__.e = function requireEnsure(chunkId) {...};
// ....
// on error function for async loading
__webpack_require__.oe = function (err) {
console.error(err);
throw err;
};
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); // 复制一个数组的push方法，这个方法的this是jsonpArray
jsonpArray.push = webpackJsonpCallback; // TODO: 为什么要复写push，而不是直接增加一个新方法名？
jsonpArray = jsonpArray.slice(); // 拷贝一个新数组
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
var parentJsonpFunction = oldJsonpFunction;
// Load entry module and return exports
return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
({
"./src/index.js": (function (module, exports, __webpack_require__) {...})
});
我们详细分析下新增的这些代码。
4.1 installedChunks缓存变量
根据注释，该对象变量主要缓存各个独立的js文件模块的加载状态。
该对象的key就是chunkId，而chunkId实际就是文件名去掉.bundle.js后剩余的内容，例如：print.bundle.js的chunkId就是print。
根据值的不同标志着key对应的文件加载状态主要有以下几种：
undefined：key对应的文件未加载；
null：key对应的文件延迟加载；
数组：正在加载（注意，这里的注释有点不准确，这个数组实际存储的是一个promise的实例，以及对应的reject和resolve）；
0：已经加载过了。
这个变量的核心作用：当一个懒加载模块被多个文件依赖时，如果该模块已经被加载过了，就不会被其它模块加载了。判断方法就是通过该缓存变量判断的。具体源码可以在__webpack_require__.e函数中看到：
__webpack_require__.e = function requireEnsure(chunkId) {
var promises = [];
// JSONP chunk loading for javascript
var installedChunkData = installedChunks[chunkId];
if (installedChunkData !== 0) { // 0 means "already installed".
// a Promise means "currently loading".
if (installedChunkData) {
promises.push(installedChunkData[2]);
} else {
// ...
// 创建一个<script>标签，将路径设置为懒加载文件路径，并插入HTML，实现该懒加载文件的加载。
}
}
return Promise.all(promises);
};
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的场景吧。留待后续研究。
4.3 自执行函数体代码分析
整个app.bundle.js文件是一个自执行函数，该函数中执行的代码如下：
1 var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
2 var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); // 复制一个数组的push方法，这个方法的this是jsonpArray
3 jsonpArray.push = webpackJsonpCallback; // TODO: 为什么要复写push，而不是直接增加一个新方法名？
4 jsonpArray = jsonpArray.slice(); // 拷贝一个新数组
5 for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
6 var parentJsonpFunction = oldJsonpFunction;
这段代码主要做了如下几个事情：
1）定义了一个全局变量webpackJsonp，改变量是一个数组，该数组变量的原生push方法被复写为webpackJsonpCallback方法，该方法是懒加载实现的一个核心方法，具体代码会在下边分析。
该全局变量在懒加载文件中被用到。在print.bundle.js中：
1 (window["webpackJsonp"] = window["webpackJsonp"] || []).push([ // 注意：这个push实际是webpackJsonpCallback方法
2 ["print"],
3 {
4 "./src/print.js": (function(module, __webpack_exports__, __webpack_require__) {...})
5 }
6 ]);
2）将数组的原生push方法备份，赋值给parentJsonpFunction变量保存。
注意：该方法的this是全局变量webpackJsonp，也就是说parentJsonpFunction('111')后，全局数组变量webpackJsonp就增加了一个'111'元素。
该方法在webpackJsonpCallback中会用到，是将懒加载文件的内容保存到全局变量webpackJsonp中。
3）上边第一步中复写push的原因？
可能是因为在懒加载文件中，调用了复写后的push，执行了原生push的功能，因此，为了更形象的表达该意思，因此直接复写了push。
但个人认为这个不太好，不易读。直接新增一个_push或者extendPush，这样是不是读起来就很简单了。
4.4 webpackJsonpCallback函数分析
该函数是懒加载的一个比较核心代码。其代码如下：
1 function webpackJsonpCallback(data) {
2 var chunkIds = data[0];
3 var moreModules = data[1];
4
5 // add "moreModules" to the modules object,
6 // then flag all "chunkIds" as loaded and fire callback
7 var moduleId, chunkId, i = 0, resolves = [];
8 for (; i < chunkIds.length; i++) {
9 chunkId = chunkIds[i];
10 if (installedChunks[chunkId]) {
11 resolves.push(installedChunks[chunkId][0]);
12 }
13 installedChunks[chunkId] = 0;
14 }
15 for (moduleId in moreModules) {
16 if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
17 modules[moduleId] = moreModules[moduleId];
18 }
19 }
20 if (parentJsonpFunction) parentJsonpFunction(data);
21
22 while (resolves.length) {
23 resolves.shift()();
24 }
25 };
参数说明：
参数是一个数组。有两个元素：第一个元素是要懒加载文件中所有模块的chunkId组成的数组；第二个参数是一个对象，对象的属性和值分别是要加载模块的moduleId和模块代码函数。
该函数主要做的事情如下：
1）遍历参数中的chunkId：
判断installedChunks缓存变量中对应chunkId的属性值：如果是真，说明模块正在加载，因为从上边分析中可以知道，installedChunks[chunkId]只有一种情况是真，那就是在对应的模块正在加载时，会将加载模块创建的promise的三个信息搞成一个数组[resolve, reject, proimise]赋值给installedChunks[chunkId]。将resolve存入resolves变量中。
将installedChunks中对应的chunkId置为0，标识该模块已经被加载过了。
2）遍历参数中模块对象所有属性：
将模块代码函数存储到modules中，该modules是入口文件app.bundle.js中自执行函数的参数。
这一步非常关键，因为执行模块加载函数__webpack_require__时，获取模块代码时，就是通过moduleId从modules中查找对应模块代码。
3）调用parentJsonpFunction（原生push方法）将整个懒加载文件的数据存入全局数组变量window.webpackJsonp。
4）遍历resolves，执行所有promise的resolve：
当执行了promise的resolve后，才会走到promise.then的成功回调中，查看源码可以看到：
1 button.onclick = (
2 e => {
3 __webpack_require__.e("print")
4 .then(__webpack_require__.bind(null, "./src/print.js"))
5 .then(
6 module => {
7 var print = module.default;
8 print();
9 }
10 )
11 }
12 );
resolve后，执行了两个then回调：
第一个回调是调用__webpack_require__函数，传入的参数是懒加载文件中的一个模块的moduleId，而这个moduleId就是上边存入到modules变量其中一个。这样就通过__webpack_require__执行了模块的代码。并将模块的返回值，传递给第二个then的回调函数；
第二个回调函数是真正的onclick回调函数的业务代码。
5）重要思考：
从这个函数可以看出：
调用__webpack_require__.e('print')方法，实际只是将对应的print.bundle.js文件加载和创建了一个异步的promise（因为并不知道什么时候这个文件才能执行完，因此需要一个异步promise，而promise的resolve会在对应的文件加载时执行，这样就能实现异步文件加载了），并没有将懒加载文件中保存的模块代码执行。
在加载对应print.bundle.js文件代码时，通过调用webpackJsonpCallback函数，实现触发加载文件时创建的promise的resolve。
resolve触发后，会执行promise的then回调，这个回调通过__webpack_require__函数执行了真正需要模块的代码（注意：如果print.bundle.js中有很多模块，只会执行用到的模块代码，而不是执行所有模块的代码），执行完后将模块的exports返回给promise的下一个then函数，该函数也就是真正的业务代码了。
综上，可以看出，webpack实际是通过promise，巧妙的实现了模块的懒加载功能。