Webpack學習－工作原理（下）

来源:https://www.cnblogs.com/wuxiaobin/archive/2019/02/25/10428520.html
-Advertisement-
Play Games

繼上篇 "文章" 介紹了Webpack的基本概念，完整流程，以及打包過程中廣播的一些事件的作用，這篇文章主要講生成的chunk文件如何輸出成具體的文件。分同步和非同步兩種情況來分析輸出的文件 。 模塊文件show.js 同步載入 生成的bundle文件 非同步載入 經webpack打包會生成兩個文件0. ...


繼上篇文章介紹了Webpack的基本概念，完整流程，以及打包過程中廣播的一些事件的作用，這篇文章主要講生成的chunk文件如何輸出成具體的文件。分同步和非同步兩種情況來分析輸出的文件使用的webpack版本：3.8.0。

模塊文件show.js

    function show(content) {
        window.document.getElementById('app').innerText = 'Hello,' + content;
    }

    // 通過 CommonJS 規範導出 show 函數
    module.exports = show;

同步載入

// main.js

import show from './show';

show('TWENTY-FOUR K');

生成的bundle文件

// webpackBootstrap啟動函數
// modules存放的是所有模塊的數組，每個模塊都是一個函數
(function(modules) {
    var installedModules = {}; // 緩存安裝過的模塊，提升性能
    //去傳入的modules數組中載入對應moduleId（index）的模塊，與node的require語句相似
    function __webpack_require__(moduleId) {
        // 檢查是否已經載入過，如果有的話直接從緩存installedModules中取出
        if(installedModules[moduleId]) {
            return installedModules[moduleId].exports;
        }
        // 如果沒有的話，就直接新建一個模塊，並且存進緩存installedModules
        var module = installedModules[moduleId] = {
            i: moduleId, // 對應modules的索引index，也就是moduleId
            l: false, // 標誌模塊是否已經載入
            exports: {}
        };
        // 執行對應模塊函數，並且傳入需要的參數
        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
        // 將標誌設置為true
        module.l = true;
        // 返回這個模塊的導出值
        return module.exports;
    }
    // 儲存modules數組
    __webpack_require__.m = modules;
    // 儲存緩存installedModules
    __webpack_require__.c = installedModules;
    // 為Harmony導出定義getter函數
    __webpack_require__.d = function(exports, name, getter) {
        if(!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, {
                configurable: false,
                enumerable: true,
                get: getter
            });
        }
    };
    // 用於與非協調模塊相容的getdefaultexport函數，將module.default或非module聲明成getter函數的a屬性上
    __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;
    };
    // 工具函數，hasOwnProperty
    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    // webpack配置中的publicPath，用於載入被分割出去的非同步代碼
    __webpack_require__.p = "";
    // 使用__webpack_require__函數去載入index為0的模塊，並且返回index為0的模塊也就是主入口文件的main.js的對應文件，__webpack_require__.s的含義是啟動模塊對應的index
    return __webpack_require__(__webpack_require__.s = 0);
})
/************************************************************************/
([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
// 設置__esModule為true，影響__webpack_require__.n函數的返回值
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// 同步載入index為1的依賴模塊
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__show__ = __webpack_require__(1);
// 獲取index為1的依賴模塊的export
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__show___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__show__);
// 同步載入


__WEBPACK_IMPORTED_MODULE_0__show___default()('wushaobin');

/***/ }),
/* 1 */
/***/ (function(module, exports) {

function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通過 CommonJS 規範導出 show 函數
module.exports = show;


/***/ })
]);

非同步載入

// main.js

// 非同步載入 show.js
import('./show').then((show) => {
  // 執行 show 函數
  show('TWENTY-FOUR K');
});

經webpack打包會生成兩個文件0.bundle.js和bundle.js，怎麼做的原因，是可以吧show.js以非同步載入形式引入，這也是分離代碼，達到減少文件體積的優化方法，兩個文件分析如下。

0.bundle.js

// 載入本文件（0.bundle.js）包含的模塊， webpackJsonp用於從非同步載入的文件中安裝模塊，掛載至全局（bundle.js）供其他文件使用
webpackJsonp(
// 在其他文件中存放的模塊id
[0],[
// 本文件所包含的模塊

/***/ (function(module, exports) {

function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通過 CommonJS 規範導出 show 函數
module.exports = show;


/***/ })
]);

bundle.js

 (function(modules) { // webpackBootstrap啟動函數
    // 安裝用於塊載入的JSONP回調
    var parentJsonpFunction = window["webpackJsonp"];
    // chunkIds 非同步載入文件（0.bundle.js）中存放的需要安裝的模塊對應的chunkId
    // moreModules 非同步載入文件（0.bundle.js）中存放需要安裝的模塊列表
    // executeModules 非同步載入文件（0.bundle.js）中存放需要安裝的模塊安裝後需要執行的模塊對應的index
    window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
        // 將 "moreModules" 添加到modules對象中,
        // 將所有chunkIds對應的模塊都標記成已經載入成功
        var moduleId, chunkId, i = 0, resolves = [], result;
        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(chunkIds, moreModules, executeModules);
        // 執行
        while(resolves.length) {
            resolves.shift()();
        }

    };

    // 緩存已經安裝的模塊
    var installedModules = {};

    // 儲存每個chunk的載入狀態
    // 鍵為chunk的id，值為0代表載入成功
    var installedChunks = {
        1: 0
    };

    // 去傳入的modules數組中載入對應moduleId（index）的模塊，與node的require語句相似，同上，此處省略
    function __webpack_require__(moduleId) {
        ...
    }

    // 用於載入被分割出去的需要非同步載入的chunk對應的文件，
    // chunkId需要非同步載入的chunk對應的id，返回的是一個promise
    __webpack_require__.e = function requireEnsure(chunkId) {
        // 從installedChunks中獲取chunkId對應的chunk文件的載入狀態
        var installedChunkData = installedChunks[chunkId];
        // 如果載入狀態為0，則表示該chunk已經載入成功，直接返回promise resolve
        if(installedChunkData === 0) {
            return new Promise(function(resolve) { resolve(); });
        }

        // installedChunkData不為空且不為0時表示chunk正在網路載入中
        if(installedChunkData) {
            return installedChunkData[2];
        }

        // installedChunkData為空，表示該chunk還沒有載入過，去載入該chunk對應的文件
        var promise = new Promise(function(resolve, reject) {
            installedChunkData = installedChunks[chunkId] = [resolve, reject];
        });
        installedChunkData[2] = promise;

        // 通過dom操作，向html head中插入一個script標簽去非同步載入chunk對應的javascript文件
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = "text/javascript";
        script.charset = 'utf-8';
        script.async = true;
        script.timeout = 120000;
        // HTMLElement 介面的 nonce 屬性返回只使用一次的加密數字，被內容安全政策用來決定這次請求是否被允許處理。
        if (__webpack_require__.nc) {
            script.setAttribute("nonce", __webpack_require__.nc);
        }
        // 文件的路徑由配置的publicPath、chunkid拼接而成
        script.src = __webpack_require__.p + "" + chunkId + ".bundle.js";
        // 設置非同步載入的最長超時時間
        var timeout = setTimeout(onScriptComplete, 120000);
        script.onerror = script.onload = onScriptComplete;
        // 在script載入和執行完成時回調
        function onScriptComplete() {
            // 防止記憶體泄漏
            script.onerror = script.onload = null;
            clearTimeout(timeout);
            
            var chunk = installedChunks[chunkId];
            // 判斷chunkid對應chunk是否安裝成功
            if(chunk !== 0) {
                if(chunk) {
                    chunk[1](new Error('Loading chunk ' + chunkId + ' failed.'));
                }
                installedChunks[chunkId] = undefined;
            }
        };
        head.appendChild(script);

        return promise;
    };

    // 這裡會給__webpack_require__設置多個屬性和方法，同上，此處省略
    

    // 非同步載入的出錯函數
    __webpack_require__.oe = function(err) { console.error(err); throw err; };

    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = 0);
 })
/************************************************************************/
 ([
// 存放沒有經過非同步載入的，隨著執行入口文件載入的模塊，也就是同步的模塊
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
// 通過__webpack_require__.e非同步載入show.js對應的chunk
// 非同步載入 show.js
__webpack_require__.e/* import() */(0).then(__webpack_require__.bind(null, 1)).then((show) => {
  // 執行 show 函數
  show('Webpack');
});


/***/ })
 ]);

總結

這裡我們通過對比同步載入和非同步載入的簡單應用，去分析兩種情況webpack打包出來文件的差異性，我們發現，對於非同步載入的bundle.js與同步的bundle.js基本相似，都是模擬node.js的require語句去導入模塊，有所不同的是多了一個__webpack_require__.e函數，用來載入分割出的需要非同步載入的chunk對應的文件，以及一個wepackJsonp函數，用於從非同步載入的文件中去安裝模塊。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • fab 菜單實現之前傳-鐘錶表盤
    個人很喜歡谷歌的material design,很喜歡但是沒有動手弄過，今天想動手操作一下Floating Action Button菜單，網上有很多種：圓形、扇形、射線、直線等。我想在一個例子中用到這幾種展現形式，觸發按鈕在不同的位置，菜單用不同的方式展示…… 基於這種需求，開始著手準備，此時遇到 ...
  • JS: Promise
    Promise 是 JavaScript 非同步編程中的重要概念，是目前較為流行的 JavaScript 非同步編程解決方案之一。它最早由社區提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了 對象。 Promise 的基本概念 一個 有以下幾種狀態: pending: 初始狀態，既不是成功 ...
  • 模塊封裝
    var MyModules = (function Manager(){ // 保存方法 var modules = {}; // 傳方法名，參數，方法 方法的參數由deps提供 function define(name, deps, impl) { // 將模塊中的方法給deps 作為下一個函數的... ...
  • vue項目中vscode格式化配置和eslint配置衝突
    使用vscode開發vue項目的時候，從遠端拉下一個新的項目後，安裝完依賴後跑起項目時，發現直接報了一堆語法錯誤：包括換行、空格、單雙引號、分號等各種格式問題 ...
  • CSS樣式
    葵花寶典： 【1】相鄰的2個margin值會疊加在一起。 【2】子元素設定的margin值會影響父元素。 在標準瀏覽器下（FireFox，Chrome，Opera，Safari）會有問題。IE下一般表現良好。 原因是：一個盒子如果沒有上補白（padding-top）和上邊框（border-top）那 ...
  • Vue2.5開發去哪兒網App 首頁開發
    主頁劃 5 個組件，即 header icon swiper recommend weekend 一. header區域開發 1. 安裝 stylus npm install stylus --save cnpm install stylus-loader --save 2. 編寫樣式 3. 添加i ...
  • 一文看透瀏覽器架構
    本文由雲+社區發表 作者：廖彩明 在從事前端開發過程中，瀏覽器作為最重要的開發環境，瀏覽器基礎是是前端開發人員必須掌握的基礎知識點，它貫穿著前端的整個網路體系。對瀏覽器原理的瞭解，決定著編寫前端代碼性能的上限。瀏覽器作為JS的運行環境，學習總結下現代瀏覽器的相關知識 前言 經常聽說瀏覽器內核，瀏覽器 ...
  • js中函數表達式和自執行函數表達式的用法總結
    對於如此多的不同情形，可以總結如下：- 在不賦值的情形下，在小括弧中的函數或者函數表達式，被阻止聲明為一個全局的變數，同時其內部是可執行的 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類