webpack模塊異步加載原理解析

時間  2019-12-30
標籤 webpack 模塊 異步 加載 原理 解析 简体版
原文   原文鏈接

大多數狀況下，咱們並不關心 webpack 是怎麼作異步加載的，可是做爲前端開發工程師咱們須要對異步加載有必定的瞭解。javascript

原文連接css

在講解以前，先讓咱們搭建一個簡單的webpack工程。html

1、工程搭建

// package.json文件
{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "dependencies": {
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "rimraf": "^3.0.0",
    "webpack": "^4.41.2"
  },
  "devDependencies": {
    "webpack-chain": "^6.0.0",
    "webpack-cli": "^3.3.10"
  }
}
複製代碼

這裏我使用了webpack-chain的方式配置 webpack。有興趣的朋友能夠去了解一下。 webpack-chain 經常使用配置前端

//webpack.config.js
const path = require("path");
const rimraf = require("rimraf");
const Config = require("webpack-chain");
const config = new Config();
const resolve = src => {
  return path.join(process.cwd(), src);
};

// 刪除 dist 目錄
rimraf.sync("dist");

config
  // 入口
  .entry("src/index")
  .add(resolve("src/index.js"))
  .end()
  // 模式
  // .mode(process.env.NODE_ENV) 等價下面
  .set("mode", process.env.NODE_ENV)
  // 出口
  .output.path(resolve("dist"))
  .filename("[name].bundle.js");

config.module
  .rule("css")
  .test(/\.css$/)
  .use("css")
  .loader("css-loader");

module.exports = config.toConfig();
複製代碼

而後在src目錄下新增兩個文件java

// index.js

const css = import("./index.css");
const css2 = import("./index2.css");
複製代碼
/* index.css和index2.css同樣 */
body {
  width: 100%;
  height: 100%;
  background-color: red;
}
複製代碼

2、原理解析

在講解以前讓咱們容許一下，yarn dev，對沒錯，這時您能夠在dist目錄下查看到生成了 3 個文件。 其中0.bundle.js和1.bundle.js分別對應index.css和index2.css。異步加載的模塊會產生一個單獨的模塊。node

dist
 ┣ src
 ┃ ┗ index.bundle.js
 ┣ 0.bundle.js
 ┗ 1.bundle.js
複製代碼

查看index.bundle.js源碼，好像不少代碼，其實精簡下來就是一個自執行函數.webpack

(function(modules) {
  // 模擬 require 語句
  function __webpack_require__() {}
  // 執行存放全部模塊數組中的第0個模塊
  __webpack_require__((__webpack_require__.s = 0));
})([
  /*存放全部模塊的數組*/
]);
複製代碼

（一） chunk.bundle.js 初識

異步加載的 js，打包時會額外的打包成一個 js 文件，好比0.bundle.jsgit

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
  [0],
  {
    "./node_modules/css-loader/dist/runtime/api.js": function( module, exports, __webpack_require__ ) {
 "use strict";
      eval("...忽略其中的代碼");
    },
    // 執行具體的模塊代碼
    "./src/index.css": function(module, exports, __webpack_require__) {
      eval("...忽略其中的代碼");
    }
  }
]);
複製代碼

經過分析0.bundle.js咱們瞭解到：github

  • 異步加載的代碼，會保存在一個全局的webpackJsonp中
  • webpackJsonppush 的的值，兩個參數分別爲
    • 異步加載的文件中存放的須要安裝的模塊對應的 Chunk ID
    • 異步加載的文件中存放的須要安裝的模塊列表
  • 在知足某種狀況下，會執行具體模塊中的代碼，那麼在何時執行，請查看下面的分析

（二）初識 bundle.js

  • bundle 是一個當即執行函數，是入口文件。
  • webpack 將全部模塊打包成了 bundle 的依賴，經過一個對象注入

jsonpScriptSrc

jsonpScriptSrc的主要做用是經過publicPath+chunkId的方式獲取到異步加載模塊的url地址。web

function jsonpScriptSrc(chunkId) {
  return __webpack_require__.p + "" + ({}[chunkId] || chunkId) + ".bundle.js";
}
複製代碼

webpack_require

__webpack_require__是webpack的核心,webpack經過__webpack_require__引入模塊。 __webpack_require__對require包裹了一層,主要功能是加載 js 文件。

function __webpack_require__(moduleId) {
  //若是須要加載的模塊已經被加載過，就直接從內存緩存中返回
  if (installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }
  //若是緩存中不存在須要加載的模塊，就新建一個模塊，並把它存在緩存中
  var module = (installedModules[moduleId] = {
    i: moduleId, // 模塊在數組中的 index
    l: false, // 該模塊是否已經加載完畢
    exports: {} // 該模塊的導出值
  });

  // 從 modules 中獲取 index 爲 moduleId 的模塊對應的函數
  // 再調用這個函數，同時把函數須要的參數傳入
  modules[moduleId].call(
    module.exports,
    module,
    module.exports,
    __webpack_require__
  );

  // 把這個模塊標記爲已加載
  module.l = true;

  // Return the exports of the module
  return module.exports;
}
複製代碼

webpack_require.e 異步加載核心

異步加載的核心實際上是使用類jsonp的方式，經過動態建立script的方式實現異步加載。

__webpack_require__.e = function requireEnsure(chunkId) {
  var promises = [];

  // 判斷當前chunk是否已經安裝，若是已經使用

  var installedChunkData = installedChunks[chunkId];
  // installedChunkData爲0表示已經加載了
  if (installedChunkData !== 0) {
    //installedChunkData 不爲空且不爲0表示該 Chunk 正在網絡加載中
    if (installedChunkData) {
      promises.push(installedChunkData[2]);
    } else {
      //installedChunkData 爲空，表示該 Chunk 尚未加載過，去加載該 Chunk 對應的文件
      var promise = new Promise(function(resolve, reject) {
        installedChunkData = installedChunks[chunkId] = [resolve, reject];
      });
      promises.push((installedChunkData[2] = promise));

      // 經過 DOM 操做，往 HTML head 中插入一個 script 標籤去異步加載 Chunk 對應的 JavaScript 文件
      var script = document.createElement("script");
      var onScriptComplete;

      script.charset = "utf-8";
      script.timeout = 120;
      if (__webpack_require__.nc) {
        script.setAttribute("nonce", __webpack_require__.nc);
      }
      // 文件的路徑爲配置的 publicPath、chunkId 拼接而成
      script.src = jsonpScriptSrc(chunkId);

      // create error before stack unwound to get useful stacktrace later
      var error = new Error();
      // 當腳本加載完成，執行對應回調
      onScriptComplete = function(event) {
        // 避免IE的內存泄漏
        script.onerror = script.onload = null;
        clearTimeout(timeout);
        // 去檢查 chunkId 對應的 Chunk 是否安裝成功，安裝成功時纔會存在於 installedChunks 中
        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.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 加載和執行完成時回調
      script.onerror = script.onload = onScriptComplete;
      document.head.appendChild(script);
    }
  }
  return Promise.all(promises);
};
複製代碼

webpackJsonpCallback

webpackJsonpCallback的主要做用是每一個異步模塊加載並安裝。 webpack 會安裝對應的 webpackJsonp 文件。

var jsonpArray = (window["webpackJsonp"] = window["webpackJsonp"] || []);
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
// 重寫數組 push 方法，重寫以後，每當webpackJsonp.push的時候，就會執行webpackJsonpCallback代碼
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
複製代碼
function webpackJsonpCallback(data) {
  //chunkIds 異步加載的文件中存放的須要安裝的模塊對應的 Chunk ID
  // moreModules 異步加載的文件中存放的須要安裝的模塊列表
  var chunkIds = data[0];
  var moreModules = data[1];

  //循環去判斷對應的chunk是否已經被安裝，若是，沒有被安裝就吧對應的chunk標記爲安裝。
  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的是在__webpack_require__.e 異步加載中的 installedChunks[chunkId] = [resolve, reject];的resolve
      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) {
    // 執行異步加載的全部 promise 的 resolve 函數
    resolves.shift()();
  }
}
複製代碼

3、總結

原理很簡單，就是利用的 jsonp 的實現原理加載模塊，只是在這裏並非從 server 拿數據而是從其餘模塊中。 總體的流程爲：

  1. 加載入口 js 文件,__webpack_require__(__webpack_require__.s = 0)
  2. 執行入口 js 文件：modules[moduleId].call(module.exports, module, module.exports, webpack_require);
  • 具體執行的代碼爲：
(function(module, exports, __webpack_require__) {
  eval(
    'module.exports = __webpack_require__(/*! D:\\webpack\\src\\index.js */"./src/index.js");\n\n\n//# sourceURL=webpack:///multi_./src/index.js?'
  );

  /***/
});

//和
eval(
  '\r\nconst css = __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.t.bind(null, /*! ./index.css */ "./src/index.css", 7))\r\nconst css2 = __webpack_require__.e(/*! import() */ 1).then(__webpack_require__.t.bind(null, /*! ./index2.css */ "./src/index2.css", 7))\r\n\n\n//# sourceURL=webpack:///./src/index.js?'
);
複製代碼

  1. 因爲上述代碼分別__webpack_require__.e了0 和 1，分別使用類jsonp的方式異步加載對應 chunk，並緩存到 promise 的 resolve 中，並標記對應 chunk 已經加載**

  2. 調用對應 chunk 模塊時會在 window 上註冊一個 webpackJsonp 數組，window['webpackJsonp'] = window['webpackJsonp'] || []。而且執行push操做。因爲push操做是使用webpackJsonpCallback進行重寫的，因此每當執行push的時候就會觸發webpackJsonpCallback. webpackJsonpCallback 標記對應 chunk 已經加載並執行代碼。

while (resolves.length) {
  // 執行異步加載的全部 promise 的 resolve 函數
  resolves.shift()();
}
複製代碼
  1. 完成各個模塊的加載

原文連接

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程