webpack 模块加载原理

最新推荐文章于 2024-05-11 02:58:56 发布

东京没有柳州热

最新推荐文章于 2024-05-11 02:58:56 发布

阅读量1.3k

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/weixin_51175605/article/details/126142379

版权

webpack

webpack 原理

1. webpack 模块加载原理

文件信息来源：webpack 深入理解模块加载原理

webpack 是一个模块打包器，在它看来，每一个文件都是一个模块。

1.1 CommonJS 规范

打包后的代码其实是一个立即执行函数，传入的参数是一个对象。这个对象以文件路径为 key，以文件内容为 value，它包含了所有打包后的模块。

// 简化后的代码
(function(modules){
  /*
    1. 定义了一个模块缓存对象 `installedModules` ，作用是缓存已经加载过的模块。
    2. 定义了一个模块加载函数 `__webpack_require__()`。
    3. ... 省略一些其他代码。
    4. 使用 `__webpack_require__()` 加载入口模块。
  */
})({
  path1: function1,
  path2: function2
})

其中的核心就是 __webpack_require__() 函数，它接收的参数是 moduleId ，其实就是文件路径。

它的执行过程如下：

判断模块是否有缓存，如果有则返回缓存模块的 export 对象，即 module.exports。
新建一个模块 module ，并放入缓存。
执行文件路径对应的模块函数。
将这个新建的模块标识为已加载。
执行完模块后，返回该模块的 exports 对象。

小结： __webpack_require__() 加载模块后，会先执行模块对应的函数，然后返回该模块的 exports 对象。而文件的导出对象 module.exports 就是一个函数。所以入口模块能通过 __webpack_require__() 引入这个函数并执行。

1.2 ES6 module

使用 ES6 module 规范打包后的代码和使用 CommonJS 规范打包后的代码绝大部分都是一样的。

一样的地方是 webpack 自定义模块规范的代码一样，唯一不同的是上面两个文件打包后的代码不同，它们的入参不一样。

// ES6 module
{
  "./src/index.js":(function(module, __webpack_exports__, __webpack_require__) {
  "use strict";
  eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _test2__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./test2 */ \"./src/test2.js\");\n\r\n\r\nfunction test() {}\r\n\r\ntest()\r\nObject(_test2__WEBPACK_IMPORTED_MODULE_0__[\"default\"])()\n\n//# sourceURL=webpack:///./src/index.js?");
 }),
}
// CommonJS
  "./src/index.js": (function(module, exports, __webpack_require__) {
    eval("const test2 = __webpack_require__(/*! ./test2 */ \"./src/test2.js\")\r\n\r\nfunction test() {}\r\n\r\ntest()\r\ntest2()\n\n//# sourceURL=webpack:///./src/index.js?");
  }),
}

源码里有几个重要的函数需要理解

webpack_require.d()：给 __webpack_exports__ 定义导出变量用的。它的作用相当于 __webpack_exports__["default"] = test2 。这个 “default” 是因为你使用 export default 来导出函数，如果这样导出函数：
```
// 前
__webpack_require__.d(__webpack_exports__, "default", function() { return test2; });
// 后
__webpack_require__.d(__webpack_exports__, "test2", function() { return test2; });
```
webpack_require.r()：作用是给 __webpack_exports__ 添加一个 __esModule 为 true 的属性，表示这是一个 ES6 module。
__webpack_require__.n()：分析该 export 对象是否是 ES6 module，如果是则返回 module['default'] 即 export default 对应的变量。如果不是 ES6 module 则直接返回 export 。

1.3 动态导入

按需加载，也叫异步加载、动态导入，即只在有需要的时候才去下载相应的资源文件。

在 webpack 中可以使用 import 来引入需要动态导入的代码

1.3.1 bundle.js

让我们来看看一个核心文件的执行顺序 bundle.js

定义了一个对象 installedChunks ，作用是缓存动态模块。
定义了一个辅助函数 jsonpScriptSrc() ，作用是根据模块 ID 生成 URL。
定义了两个新的核心函数 __webpack_require__.e() 和 webpackJsonpCallback() 。
定义了一个全局变量 window["webpackJsonp"] = []，它的作用是存储需要动态导入的模块。
重写 window["webpackJsonp"] 数组的 push() 方法为 webpackJsonpCallback() 。也就是说 window["webpackJsonp"].push() 其实执行的是 webpackJsonpCallback()

1.3.2 0.bundle.js

0.bundle.js 文件可以发现，它正是使用 window["webpackJsonp"].push() 来放入动态模块的。动态模块数据项有两个值，第一个是它是模块的 ID ；第二个值是模块的路径名和模块内容。

1.3.3 webpack_require.e()

原来模块代码中的 import('./test2') 被翻译成了如下代码

function test() {}
test()
__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/test2.js"))
//# sourceURL=webpack:///./src/index.js?

他的处理逻辑是

先查看该模块 ID 对应缓存的值是否为 0，0 代表已经加载成功了，第一次取值为 undefined 。
如果不为 0 并且不是 undefined 代表已经是加载中的状态。然后将这个加载中的 Promise 推入 promises 数组。
如果不为 0 并且是 undefined 就新建一个 Promise ，用于加载需要动态导入的模块。
生成一个 script 标签，URL 使用 jsonpScriptSrc(chunkId)` 生成，即需要动态导入模块的 URL。
为这个 script 标签设置一个 2 分钟的超时时间，并设置一个 onScriptComplete() 函数，用于处理超时错误。
然后添加到页面中 document.head.appendChild(7. script)，开始加载模块。
返回 promises 数组。

1.3.4 小结

总的来说，动态导入的逻辑如下：

重写 window["webpackJsonp"].push() 方法。
入口模块使用 __webpack_require__.e() 下载动态资源。
资源下载完成后执行 window["webpackJsonp"].push()，即 webpackJsonpCallback()。
将资源标识为 0，代表已经加载完成。由于加载模块使用的是 Promise，所以要执行 resolve()。
再看一下入口模块的加载代码 __webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/test2.js"))，下载完成后执行 then() 方法，调用 __webpack_require__() 真正开始加载代码。