最近看到一篇文章不錯，我們最常用的import來加載模塊，但是它真正背后如何運行的，只是略知一二，但真要說出個所以然來，還真不大清楚，所以這篇文章感覺講的還挺好的，所以轉載過來自己學習一下。
來源於作者李永寧的掘金博客：https://juejin.cn/post/6859569958742196237。
你的 import 被 webpack 編譯成了什么？（李永寧）
https://juejin.cn/post/6859569958742196237
我們知道import可以用來加載模塊，而且import一般用在需要懶加載的地方。那么你知道 import moduleName from 'xxModule' 和 import('xxModule') 經過webpack編譯打包后最終變成了什么？在瀏覽器中是怎么運行的？
我們都知道webpack的打包過程大概流程是這樣的：
- 合並
webpack.config.js和命令行傳遞的參數，形成最終的配置- 解析配置，得到
entry入口- 讀取入口文件內容，通過
@babel/parse將入口內容（code）轉換成ast- 通過
@babel/traverse遍歷ast得到模塊的各個依賴- 通過
@babel/core（實際的轉換工作是由@babel/preset-env來完成的）將ast轉換成es5 code- 通過循環偽遞歸的方式拿到所有模塊的所有依賴並都轉換成
es5
從以上內容可以看出來，最終的代碼中肯定是沒有import語句的，因為es5就沒有import；那么我們從哪去找答案呢？有兩個地方，一是webpack源碼，二是打包后的文件，對於今天的問題而言，后者更簡單直接一些。
一、項目體驗
1、/src/index.js
/** * 入口文件，引入 print 方法，並執行 * 定義了一個 button 方法，為頁面添加一個按鈕，並為按鈕設置了一個 onclick 事件，負責動態引入一個文件 */ import { print } from './num.js' print() function button () { const button = document.createElement('button') const text = document.createTextNode('click me') button.appendChild(text) button.onclick = e => import('./info.js').then(res => { console.log(res.log) }) return button } document.body.appendChild(button())
2、/src/num.js
import { tmpPrint } from './tmp.js' export function print () { tmpPrint() console.log('我是 num.js 的 print 方法') }
3、/src/tmp.js
export function tmpPrint () { console.log('tmp.js print') }
4、/src/info.js
export const log = "log info"
5、打包
會看到多了一個 dist 目錄，且看輸出結果，main.js大家肯定都知道是什么，這個是我們在webpack.config.js中配置的輸出的文件名，但是0.main.js呢？這是什么？我們也沒配置，可以先想一下，之后我們從代碼中找答案
6、模版文件
新建/dist/index.html文件，並引入打包后的main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "./main.js"></script>
</body>
</html>
在瀏覽器打開 index.html，可以看到index.html加載以后資源加載以及代碼的執行情況，會發現我們寫的代碼中的同步邏輯均已執行，
接下來看看異步邏輯（點擊按鈕），這里為了效果，點擊之前分別清空了Network和Console兩個標簽的內容
點擊按鈕以后發生了什么？從表面看似乎是這樣的：
點擊按鈕，在
html中動態添加了一個script標簽，引入了一個文件（0.main.js），然后發送兩個一個http請求進行資源加載，加載成功以后在控制台輸出一段日志。
到這里其實有一部分的答案已經出來，
import('xxModule)，它提供了一種懶加載的機制，動態往html中添加script`標簽，然后加載資源並執行，那具體是怎么做的呢？
具體內容可以看我之前總結的這篇博客：淺析webpack異步加載原理及分包策略
好了，現象我們也看完了，接下來我們去源碼中找答案。
二、源碼分析
我們一步一步來拆解打包后的代碼。
首先，我們將打包后的代碼進行折疊，如下
(function (modules) { // xxxx
})({ // xxx
})
這段代碼是不是很熟悉？就是一個自執行函數
1、函數參數
(function (modules) { // xxxx
})({ // src/index.js 模塊
"./src/index.js": (function (module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); var _num_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/num.js"); Object(_num_js__WEBPACK_IMPORTED_MODULE_0__["print"])() function button() { const button = document.createElement('button') const text = document.createTextNode('click me') button.appendChild(text) button.onclick = e => __webpack_require__.e(0) .then(__webpack_require__.bind(null, "./src/info.js")) .then(res => { console.log(res.log) }) return button } document.body.appendChild(button()) //# sourceURL=webpack:///./src/index.js?");
}), // ./src/num.js 模塊
"./src/num.js": (function (module, __webpack_exports__, __webpack_require__) { "use strict"; __webpack_require__.r(__webpack_exports__); __webpack_require__.d(__webpack_exports__, "print", function () { return print; }); var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js"); function print() { Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])() console.log('我是 num.js 的 print 方法') } //# sourceURL=webpack:///./src/num.js?");
}), // /src/tmp.js 模塊
"./src/tmp.js": (function (module, __webpack_exports__, __webpack_require__) { "use strict"; // eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"tmpPrint\", function() { return tmpPrint; });\nfunction tmpPrint () {\n console.log('tmp.js print')\n}\n\n//# sourceURL=webpack:///./src/tmp.js?");
__webpack_require__.r(__webpack_exports__); __webpack_require__.d( __webpack_exports__, "tmpPrint", function () { return tmpPrint; }); function tmpPrint() { console.log('tmp.js print') } //# sourceURL=webpack:///./src/tmp.js?");
}) })
看到這里有沒有很熟悉，再回想一下webpack的打包過程，會發現：
webpack將所有的import moduleName from 'xxModule'都變成了一個Map對象，key為文件路徑，value為一個可執行的函數，而函數內容其實就是模塊中導出的內容，當然，模塊自己也被webpack做了一些處理，接着往下進行。
從打包后Map對象中能找到我們代碼中的各個模塊，以及模塊的內容，但是也多了很多不屬於我們編寫的代碼，比如以__webpack_require__開頭的代碼，這些又是什么呢？其實是webpack自定義的一些方法，我們接着往下閱讀
2、函數體
以下內容為打包后的完整代碼，做了一定的格式化，關鍵地方都寫了詳細的注釋，閱讀時搜索“入口位置”開始一步一步的閱讀，如果有碰到難以理解的地方可配合單步調試
/** * modules = { * './src/index.js': function () {}, * './src/num.js': function () {}, * './src/tmp.js': function () {} * } */ (function (modules) { // webpackBootstrap
/** * install a JSONP callback for chunk loading * 模塊加載成功，更改緩存中的模塊狀態，並且執行模塊內容 * @param {*} data = [ * [chunkId], * { * './src/info.js': function () {} * } * ] */ 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]); } // 這里將模塊的加載狀態改為了 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, 模塊緩存，類似於 commonJS 的 require 緩存機制，只不過這里的 key 是相對路徑
var installedModules = {}; /** * 定義 chunk 的加載情況，比如 main = 0 是已加載 * object to store loaded and loading chunks * undefined = chunk not loaded * null = chunk preloaded/prefetched * Promise = chunk loading * 0 = chunk loaded */
var installedChunks = { "main": 0 }; // script path function， 返回需要動態加載的 chunk 的路徑
function jsonpScriptSrc(chunkId) { return __webpack_require__.p + "" + chunkId + ".main.js" } /** * The require function * 接收一個 moduleId，其實就是一個模塊相對路徑，然后查緩存（沒有則添加緩存）， * 然后執行模塊代碼，返回模塊運行后的 module.exports * 一句話總結就是 加載指定模塊然后執行，返回執行結果（module.exports) * * __webpack_require__(__webpack_require__.s = "./src/index.js") */ 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) * * // 示例 * module = installedModules['./src/index.js'] = { * i: './src/index.js', * l: false, * exports: {} * } */
var module = installedModules[moduleId] = { i: moduleId, l: false, exports: {} }; /** * Execute the module function * modules['./src/index.js'] is a 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]; // 0 means "already installed".
if (installedChunkData !== 0) { // 說明模塊沒有安裝 // 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, create script element
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 = __webpack_public_path__ + chunkId + main.js, 即模塊路徑
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) { // 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.name = 'ChunkLoadError'; 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; // 將 script 標簽添加到 head 標簽尾部
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 * @param {*} exports = {} * @param {*} name = 模塊名 * @param {*} getter => 模塊函數 * * 在 exports 對象上定義一個 key value，key 為模塊名稱，value 為模塊的可執行函數 * exports = { * moduleName: module function * } */ __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 * @param {*} exports = {} * * exports = { * __esModule: true * } */ __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; }; /** * 通過全局屬性存儲異步加載的資源項，打包文件首次加載時如果屬性值不為空，則說明已經有資源被加載了， * 將這些資源同步到installedChunks對象中，避免資源重復加載，當然也是這句導致微應用框架single-spa中的所有子應用導出的 * 包名需要唯一，否則一旦異步的重名模塊存在，重名的后續模塊不會被加載，且顯示的資源是第一個加載的重名模塊， * 也就是所謂的JS全局作用域的污染 * * 其實上面說的這個問題，webpack官網已經提到了 * https://webpack.docschina.org/configuration/output/#outputjsonpfunction */
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || []; var oldJsonpFunction = jsonpArray.push.bind(jsonpArray); jsonpArray.push = webpackJsonpCallback; 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"); }) ({ // 代碼中所有的 import moduleName from 'xxModule' 變成了以下的 Map 對象 // /src/index.js 模塊
"./src/index.js": /** * @param module = { * i: './src/index.js', * l: false, * exports: {} * * @param __webpack_exports__ = module.exports = {} * * @param __webpack_require__ => 自定義的 require 函數，加載指定模塊，並執行模塊代碼，返回執行結果 * */ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; /** * * define __esModule on exports * __webpack_exports = module.exports = { * __esModule: true * } */ __webpack_require__.r(__webpack_exports__); // 加載 ./src/num.js 模塊
var _num_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/num.js"); Object(_num_js__WEBPACK_IMPORTED_MODULE_0__["print"])() function button() { const button = document.createElement('button') const text = document.createTextNode('click me') button.appendChild(text) /** * 異步執行部分 */ button.onclick = e => __webpack_require__.e(0) // 模塊異步加載完成后，開始執行模塊內容 => window["webpackJsonp"].push = window["webpackJsonp"].push = function (data) {}
.then(__webpack_require__.bind(null, "./src/info.js")) .then(res => { console.log(res.log) }) return button } document.body.appendChild(button()) //# sourceURL=webpack:///./src/index.js?");
}), // /src/num.js 模塊
"./src/num.js": /** * @param module = { * i: './src/num.js', * l: false, * exports: {} * * @param __webpack_exports__ = module.exports = {} * * @param __webpack_require__ => 自定義的 require 函數，加載指定模塊，並執行模塊代碼，返回執行結果 * */ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; /** * * define __esModule on exports * __webpack_exports = module.exports = { * __esModule: true * } */ __webpack_require__.r(__webpack_exports__); /** * module.exports = { * __esModule: true, * print * } */ __webpack_require__.d(__webpack_exports__, "print", function () { return print; }); // 加載 ./src/tmp.js 模塊
var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js"); function print() { Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])() console.log('我是 num.js 的 print 方法') } //# sourceURL=webpack:///./src/num.js?");
}), // /src/tmp.js 模塊
"./src/tmp.js": /** * @param module = { * i: './src/num.js', * l: false, * exports: {} * * @param __webpack_exports__ = module.exports = {} * * @param __webpack_require__ => 自定義的 require 函數，加載指定模塊，並執行模塊代碼，返回執行結果 * */ (function (module, __webpack_exports__, __webpack_require__) { "use strict"; /** * * define __esModule on exports * __webpack_exports = module.exports = { * __esModule: true * } */ __webpack_require__.r(__webpack_exports__); /** * module.exports = { * __esModule: true, * tmpPrint * } */ __webpack_require__.d(__webpack_exports__, "tmpPrint", function () { return tmpPrint; }); function tmpPrint() { console.log('tmp.js print') } //# sourceURL=webpack:///./src/tmp.js?");
}) });
三、總結
經過以上內容的學習，相比對於一開始的問題，答案呼之欲出了吧。
問：import moduleName from 'xxModule'和import('xxModule')經過webpack編譯打包后最終變成了什么？在瀏覽器中是怎么運行的？
答：
1、import經過webpack打包以后變成一些Map對象，key為模塊路徑，value為模塊的可執行函數；
2、代碼加載到瀏覽器以后從入口模塊開始執行，其中執行的過程中，最重要的就是webpack定義的__webpack_require__函數，負責實際的模塊加載並執行這些模塊內容，返回執行結果，其實就是讀取Map對象，然后執行相應的函數；
3、當然其中的異步方法（import('xxModule')）比較特殊一些，它會單獨打成一個包，采用動態加載的方式，
具體過程：當用戶觸發其加載的動作時，會動態的在head標簽中創建一個script標簽，然后發送一個http請求，加載模塊，模塊加載完成以后自動執行其中的代碼，主要的工作有兩個，更改緩存中模塊的狀態，另一個就是執行模塊代碼。