建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。
大興網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
一、是什么
HMR全稱 Hot Module Replacement，可以理解為模塊熱替換，指在應(yīng)用程序運(yùn)行過程中，替換、添加、刪除模塊，而無需重新刷新整個(gè)應(yīng)用。
例如，我們?cè)趹?yīng)用運(yùn)行過程中修改了某個(gè)模塊，通過自動(dòng)刷新會(huì)導(dǎo)致整個(gè)應(yīng)用的整體刷新，那頁面中的狀態(tài)信息都會(huì)丟失
如果使用的是 HMR，就可以實(shí)現(xiàn)只將修改的模塊實(shí)時(shí)替換至應(yīng)用中，不必完全刷新整個(gè)應(yīng)用
在webpack中配置開啟熱模塊也非常的簡單，如下代碼：
- const webpack = require('webpack')
- module.exports = {
- // ...
- devServer: {
- // 開啟 HMR 特性
- hot: true
- // hotOnly: true
- }
- }
通過上述這種配置，如果我們修改并保存css文件，確實(shí)能夠以不刷新的形式更新到頁面中
但是，當(dāng)我們修改并保存js文件之后，頁面依舊自動(dòng)刷新了，這里并沒有觸發(fā)熱模塊
所以，HMR并不像 Webpack 的其他特性一樣可以開箱即用，需要有一些額外的操作
我們需要去指定哪些模塊發(fā)生更新時(shí)進(jìn)行HRM，如下代碼：
- if(module.hot){
- module.hot.accept('./util.js',()=>{
- console.log("util.js更新了")
- })
- }
二、實(shí)現(xiàn)原理
首先來看看一張圖，如下：
- Webpack Compile：將 JS 源代碼編譯成 bundle.js
- HMR Server：用來將熱更新的文件輸出給 HMR Runtime
- Bundle Server：靜態(tài)資源文件服務(wù)器，提供文件訪問路徑
- HMR Runtime：socket服務(wù)器，會(huì)被注入到瀏覽器，更新文件的變化
- bundle.js：構(gòu)建輸出的文件
- 在HMR Runtime 和 HMR Server之間建立 websocket，即圖上4號(hào)線，用于實(shí)時(shí)更新文件變化
上面圖中，可以分成兩個(gè)階段：
- 啟動(dòng)階段為上圖 1 - 2 - A - B
在編寫未經(jīng)過webpack打包的源代碼后，Webpack Compile 將源代碼和 HMR Runtime 一起編譯成 bundle文件，傳輸給Bundle Server 靜態(tài)資源服務(wù)器
- 更新階段為上圖 1 - 2 - 3 - 4
當(dāng)某一個(gè)文件或者模塊發(fā)生變化時(shí)，webpack監(jiān)聽到文件變化對(duì)文件重新編譯打包，編譯生成唯一的hash值，這個(gè)hash值用來作為下一次熱更新的標(biāo)識(shí)
根據(jù)變化的內(nèi)容生成兩個(gè)補(bǔ)丁文件：manifest(包含了 hash 和 chundId，用來說明變化的內(nèi)容)和chunk.js 模塊
由于socket服務(wù)器在HMR Runtime 和 HMR Server之間建立 websocket鏈接，當(dāng)文件發(fā)生改動(dòng)的時(shí)候，服務(wù)端會(huì)向?yàn)g覽器推送一條消息，消息包含文件改動(dòng)后生成的hash值，如下圖的h屬性，作為下一次熱更新的標(biāo)識(shí)
在瀏覽器接受到這條消息之前，瀏覽器已經(jīng)在上一次socket 消息中已經(jīng)記住了此時(shí)的hash 標(biāo)識(shí)，這時(shí)候我們會(huì)創(chuàng)建一個(gè) ajax 去服務(wù)端請(qǐng)求獲取到變化內(nèi)容的 manifest 文件
mainfest文件包含重新build生成的hash值，以及變化的模塊，對(duì)應(yīng)上圖的c屬性
瀏覽器根據(jù) manifest 文件獲取模塊變化的內(nèi)容，從而觸發(fā)render流程，實(shí)現(xiàn)局部模塊更新
三、總結(jié)
關(guān)于webpack熱模塊更新的總結(jié)如下：
- 通過webpack-dev-server創(chuàng)建兩個(gè)服務(wù)器：提供靜態(tài)資源的服務(wù)(express)和Socket服務(wù)
- express server 負(fù)責(zé)直接提供靜態(tài)資源的服務(wù)(打包后的資源直接被瀏覽器請(qǐng)求和解析)
- socket server 是一個(gè) websocket 的長連接，雙方可以通信
- 當(dāng) socket server 監(jiān)聽到對(duì)應(yīng)的模塊發(fā)生變化時(shí)，會(huì)生成兩個(gè)文件.json(manifest文件)和.js文件(update chunk)
- 通過長連接，socket server 可以直接將這兩個(gè)文件主動(dòng)發(fā)送給客戶端(瀏覽器)
- 瀏覽器拿到兩個(gè)新的文件后，通過HMR runtime機(jī)制，加載這兩個(gè)文件，并且針對(duì)修改的模塊進(jìn)行更新
參考文獻(xiàn)
- https://zhuanlan.zhihu.com/p/138446061
- https://github.com/Jocs/jocs.github.io/issues/15
- https://juejin.cn/post/6844904134697549832
- https://vue3js.cn/interview/
當(dāng)前標(biāo)題：面試官：說說Webpack的熱更新是如何做到的？原理是什么？
分享鏈接：http://www.fisionsoft.com.cn/article/cdidgjj.html
