日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
面試官：說(shuō)說(shuō)Webpack的熱更新是如何做到的？原理是什么？

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

大興網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

一、是什么

HMR全稱 Hot Module Replacement，可以理解為模塊熱替換，指在應(yīng)用程序運(yùn)行過(guò)程中，替換、添加、刪除模塊，而無(wú)需重新刷新整個(gè)應(yīng)用。

例如，我們?cè)趹?yīng)用運(yùn)行過(guò)程中修改了某個(gè)模塊，通過(guò)自動(dòng)刷新會(huì)導(dǎo)致整個(gè)應(yīng)用的整體刷新，那頁(yè)面中的狀態(tài)信息都會(huì)丟失

如果使用的是 HMR，就可以實(shí)現(xiàn)只將修改的模塊實(shí)時(shí)替換至應(yīng)用中，不必完全刷新整個(gè)應(yīng)用

在webpack中配置開啟熱模塊也非常的簡(jiǎn)單，如下代碼：

 
 
 
 
      
  
  
  
  1. const webpack = require('webpack') 
    2.   
  
  
  
  2. module.exports = { 
    3.   
  
  
  
  3.   // ... 
    4.   
  
  
  
  4.   devServer: { 
    5.   
  
  
  
  5.     // 開啟 HMR 特性 
    6.   
  
  
  
  6.     hot: true 
    7.   
  
  
  
  7.     // hotOnly: true 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

通過(guò)上述這種配置，如果我們修改并保存css文件，確實(shí)能夠以不刷新的形式更新到頁(yè)面中

但是，當(dāng)我們修改并保存js文件之后，頁(yè)面依舊自動(dòng)刷新了，這里并沒有觸發(fā)熱模塊

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

我們需要去指定哪些模塊發(fā)生更新時(shí)進(jìn)行HRM，如下代碼：

 
 
 
 
      
  
  
  
  1. if(module.hot){ 
    2.   
  
  
  
  2.     module.hot.accept('./util.js',()=>{ 
    3.   
  
  
  
  3.         console.log("util.js更新了") 
    4.   
  
  
  
  4.     }) 
    5.   
  
  
  
  5. } 
    6.

二、實(shí)現(xiàn)原理

首先來(lái)看看一張圖，如下：

  • Webpack Compile：將 JS 源代碼編譯成 bundle.js
  • HMR Server：用來(lái)將熱更新的文件輸出給 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)過(guò)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值用來(lái)作為下一次熱更新的標(biāo)識(shí)

根據(jù)變化的內(nèi)容生成兩個(gè)補(bǔ)丁文件：manifest(包含了 hash 和 chundId，用來(lái)說(shuō)明變化的內(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é)如下：

  • 通過(guò)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 的長(zhǎng)連接，雙方可以通信
  • 當(dāng) socket server 監(jiān)聽到對(duì)應(yīng)的模塊發(fā)生變化時(shí)，會(huì)生成兩個(gè)文件.json(manifest文件)和.js文件(update chunk)
  • 通過(guò)長(zhǎng)連接，socket server 可以直接將這兩個(gè)文件主動(dòng)發(fā)送給客戶端(瀏覽器)
  • 瀏覽器拿到兩個(gè)新的文件后，通過(guò)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/

網(wǎng)站標(biāo)題：面試官：說(shuō)說(shuō)Webpack的熱更新是如何做到的？原理是什么？
轉(zhuǎn)載注明：http://m.5511xx.com/article/cdidgjj.html