說說webpack的熱更新是如何做到的?原理是什麼?

来源:https://www.cnblogs.com/smileZAZ/p/18211562
-Advertisement-
Play Games

一、是什麼 HMR全稱 Hot Module Replacement,可以理解為模塊熱替換,指在應用程式運行過程中,替換、添加、刪除模塊,而無需重新刷新整個應用 例如,我們在應用運行過程中修改了某個模塊,通過自動刷新會導致整個應用的整體刷新,那頁面中的狀態信息都會丟失 如果使用的是 HMR,就可以實 ...


一、是什麼

HMR全稱 Hot Module Replacement,可以理解為模塊熱替換,指在應用程式運行過程中,替換、添加、刪除模塊,而無需重新刷新整個應用

例如,我們在應用運行過程中修改了某個模塊,通過自動刷新會導致整個應用的整體刷新,那頁面中的狀態信息都會丟失

如果使用的是 HMR,就可以實現只將修改的模塊實時替換至應用中,不必完全刷新整個應用

webpack中配置開啟熱模塊也非常的簡單,如下代碼:

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 開啟 HMR 特性
    hot: true
    // hotOnly: true
  }
}

通過上述這種配置,如果我們修改並保存css文件,確實能夠以不刷新的形式更新到頁面中

但是,當我們修改並保存js文件之後,頁面依舊自動刷新了,這裡並沒有觸發熱模塊

所以,HMR並不像 Webpack 的其他特性一樣可以開箱即用,需要有一些額外的操作

我們需要去指定哪些模塊發生更新時進行HRM,如下代碼:

if(module.hot){
    module.hot.accept('./util.js',()=>{
        console.log("util.js更新了")
    })
}

二、實現原理

首先來看看一張圖,如下:

  • Webpack Compile:將 JS 源代碼編譯成 bundle.js
  • HMR Server:用來將熱更新的文件輸出給 HMR Runtime
  • Bundle Server:靜態資源文件伺服器,提供文件訪問路徑
  • HMR Runtime:socket伺服器,會被註入到瀏覽器,更新文件的變化
  • bundle.js:構建輸出的文件
  • 在HMR Runtime 和 HMR Server之間建立 websocket,即圖上4號線,用於實時更新文件變化

上面圖中,可以分成兩個階段:

  • 啟動階段為上圖 1 - 2 - A - B

在編寫未經過webpack打包的源代碼後,Webpack Compile 將源代碼和 HMR Runtime 一起編譯成 bundle文件,傳輸給Bundle Server 靜態資源伺服器

  • 更新階段為上圖 1 - 2 - 3 - 4

當某一個文件或者模塊發生變化時,webpack監聽到文件變化對文件重新編譯打包,編譯生成唯一的hash值,這個hash值用來作為下一次熱更新的標識

根據變化的內容生成兩個補丁文件:manifest(包含了 hash 和 chundId,用來說明變化的內容)和chunk.js 模塊

由於socket伺服器在HMR Runtime 和 HMR Server之間建立 websocket鏈接,當文件發生改動的時候,服務端會向瀏覽器推送一條消息,消息包含文件改動後生成的hash值,如下圖的h屬性,作為下一次熱更細的標識

 

在瀏覽器接受到這條消息之前,瀏覽器已經在上一次socket 消息中已經記住了此時的hash 標識,這時候我們會創建一個 ajax 去服務端請求獲取到變化內容的 manifest 文件

mainfest文件包含重新build生成的hash值,以及變化的模塊,對應上圖的c屬性

瀏覽器根據 manifest 文件獲取模塊變化的內容,從而觸發render流程,實現局部模塊更新

三、總結

關於webpack熱模塊更新的總結如下:

  • 通過webpack-dev-server創建兩個伺服器:提供靜態資源的服務(express)和Socket服務
  • express server 負責直接提供靜態資源的服務(打包後的資源直接被瀏覽器請求和解析)
  • socket server 是一個 websocket 的長連接,雙方可以通信
  • 當 socket server 監聽到對應的模塊發生變化時,會生成兩個文件.json(manifest文件)和.js文件(update chunk)
  • 通過長連接,socket server 可以直接將這兩個文件主動發送給客戶端(瀏覽器)
  • 瀏覽器拿到兩個新的文件後,通過HMR runtime機制,載入這兩個文件,並且針對修改的模塊進行更新

參考文獻

  • https://zhuanlan.zhihu.com/p/138446061
  • https://github.com/Jocs/jocs.github.io/issues/15
  • https://juejin.cn/post/6844904134697549832
  • https://vue3js.cn/interview/

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • 事情是這樣的,因為系統漏洞問題,需要升級openssh,從OpenSSH_9.3p1升級到OpenSSH_9.3p2 系統版本:CentOS 7 升級OpenSSH_9.3p2之前需要先升級zlib 從官網下載 wget https://www.zlib.net/zlib-1.3.1.tar.gz ...
  • Linux不像windows系統那樣方便的圖形界面,特別是作為伺服器使用的時候,只有命令行可以使用。 我有個雲伺服器平時用來做一些數據分享用的,最近想看看磁碟和其中文件的占用情況,於是搜索並學習了一些查看磁碟空間信息的命令,命令雖然簡單,但對我自己來說還是有些新的東西值得記錄。 1. df 首先,登 ...
  • Centos7安裝weblogic 1、配置java環境weblogic運行依賴java環境,所以第一步先配置java環境上傳、解壓jdk安裝包[root@bogon ~]# rz -be[root@bogon ~]# tar -zxvf jdk1.8.tar.gz 配置java環境變數[root@ ...
  • 背景 根據orangepi zero2用戶手冊說明,linux5.13內核不能使用 modprobe fbtft_device 驅動spi lcd 查看linux內核源碼提交記錄,發現在v5.4-rc3中刪除了fbtft_device.c文件 commit如下 staging/fbtft: Remo ...
  • 一、卸載mariadb的rpm包 1、首先,你需要找出已安裝的MariaDB包的具體名稱。可以使用以下命令列出所有已安裝的MariaDB包: rpm -qa | grep mariadb 2、刪除命令(安裝mysql不一定需要卸載)yum -y remove +【上圖的文件名】或者rpm -e -- ...
  • 前言 應用中的信息傳遞是為了實現各種功能和交互。信息傳遞可以幫助用戶和應用之間進行有效的溝通和交流。通過信息傳遞,應用可以向用戶傳遞重要的消息、通知和提示,以提供及時的反饋和指導。同時,用戶也可以通過信息傳遞嚮應用發送指令、請求和反饋,以實現個性化的需求和操作。 信息傳遞還可以幫助應用之間實現數 ...
  • Symbol 引用 iconfont icon圖標庫 Symbol 引用 這是一種全新的使用方式,應該說這才是未來的主流,也是平臺目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個 SVG 的集合,與另外兩種相比具有如下特點: 支持多色圖標了,不再受單色限制。 通過一些技巧,支持像字體 ...
  • XML中的字元串數據類型表示字元序列,包括換行、回車和製表符。處理器不修改值。`normalizedString`去除這些特殊字元,`token`則進一步移除前導和尾隨空格及多餘空格。字元串類型可使用枚舉、長度等限制。`date`和`dateTime`數據類型表示日期和時間,`duration`表示... ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...