Webpack模塊熱替換(HMR)
熱替換就是我代碼更新了，我不需要手動f5頁面就更新了索绪，這個功能主要是用于開發(fā)過程中契吉，對生產(chǎn)環(huán)境沒有任何幫助宅荤。效果上就是界面的無刷新更新。
原理闡述
這一部分主要是參考官網(wǎng)的文檔加一些自己的理解
webpack在編譯的時候會加一小段HMR runtime的代碼進bundle里面浸策，這一段代碼運行在你的APP中冯键。當(dāng)編譯結(jié)束后Webpack不會退出而是監(jiān)聽源代碼的變化，如果檢測到了源代碼變化庸汗，Webpack會重新編譯發(fā)生變化的模塊(不會全部重新編譯)惫确。
然后根據(jù)設(shè)置(這個設(shè)置是啥讀者能不能告訴我)，webpack會發(fā)送信號給HMR runtime或者HMR runtime會輪詢webpack是否有變化蚯舱。反正不管怎么樣變化后的模塊會發(fā)送給HMR runtime改化，然后會嘗試熱更新。
首先檢查這個更新后的模塊是否是self-accept枉昏。如果不是陈肛，它就會檢查其他依賴于這個更新后的模塊的其他模塊，如果這些模塊也不accept(accept我后面會解釋)這個更新凶掰，那就會冒泡到更上一層燥爷，去檢測那些依賴于依賴這個更新后的模塊的模塊的模塊（好繞啊。懦窘。反正就是處于依賴層再上一層的模塊）前翎。冒泡會直到這個更新被accept或者到達app的入口起點(entry points)，不過這種情況熱更新就廢了畅涂。
從 App 的角度
App 代碼請求 HMR runtime檢查更新.（這里的說法應(yīng)該是輪詢）
HMR runtime會下載(異步)更新的代碼,
通知 App 代碼運行已經(jīng)可用.
App 代碼請求 HMR runtime應(yīng)用更新.
HMR 運行時應(yīng)用更新(同步).
這個過程, App 代碼可以也可以不依賴用戶操作(看需要).
從編譯器(Webpack)角度
除了普通的靜態(tài)文件, 編譯器觸發(fā) "Update" 進行版本更新."Update" 包含兩個部分:
- the update manifest (json)
- one or multiple update chunks (js)
manifest 包含新的編譯結(jié)果的 Hash 和列表儲存的 chunks (2.).
更新的 chunks 包含 chunk 當(dāng)中所有更新掉的模塊的代碼(或者模塊已經(jīng)被移除的標(biāo)記)
編譯器額外會保證模塊和 chunk 的 id 在多個建構(gòu)當(dāng)中一致
它使用 "records" JSON 文件在建構(gòu)之間保存它們(或者存儲在內(nèi)存里)
從模塊角度
HMR 是個可選功能, 它只影響包含 HMR 代碼的模塊文件里描述了模塊中可用的 API通常模塊開發(fā)者寫的處理器代碼會在這個模塊的依賴更新時被調(diào)用他也可以寫個處理器, 在當(dāng)前模塊更新時被調(diào)用
大多數(shù)情況不會強制在每個模塊里寫上 HMR 代碼如果一個模塊不包含 HMR 處理器, 更新事件就會向上冒泡意味著單個處理器可以處理整個模塊樹的更新如果樹當(dāng)中單個模塊被更新, 整個模塊樹就會重新(刷新而不是 transferred(轉(zhuǎn)移?))
從 HMR runtime角度(技術(shù)的)
對模塊系統(tǒng)而言, HMR runtime是一段被插入的代碼港华，它用來追蹤模塊的父節(jié)點子節(jié)點
管理層面, 運行時支持兩個方法: check和 apply
check
check 發(fā)起 HTTP 請求去獲取更新的 manifest。請求失敗時, 意味著沒有可用的更新否則將能返回更新的 chunks 的列表, 和當(dāng)前已加載的 chunks 列表做對比每個被更新的 chunk 對應(yīng)的更新后的 chunk 都會被下載所有存儲在運行時當(dāng)中的代碼模塊隨著代碼進行更新運行時會切換到 ready狀態(tài), 表明更新已經(jīng)被下載并準(zhǔn)備好應(yīng)用
對于每個 ready 狀態(tài)的新的 chunk 請求來說, 更新的 chunk 也已經(jīng)被下載好了
apply
apply 方法標(biāo)記所有更新過的模塊為 invalid午衰，每個 invalid 模塊需要有個 update 處理器, 在模塊中或者在每個父節(jié)點不然 invalid 向上冒泡, 多有的父節(jié)點也被標(biāo)記為 invalid這個步驟持續(xù)知道不再有"冒泡"出現(xiàn)如果冒泡到了 entry point 就說明過程失敗了
現(xiàn)在所有 invalid 模塊會被處置(dispose 處理器)和卸載隨后當(dāng)前的 hash 被更新, 所有的 "accept" 處理器被調(diào)用運行時切換回到 "idle" 狀態(tài), 一切繼續(xù)正常運行
生成的文件(技術(shù)的)
左側(cè)表示初始的編譯器流程右側(cè)表示當(dāng)模塊 4 和 9 更新的流程
后記
立宜。。臊岸。寫到后面感覺我就是在翻譯文檔而已橙数。。不過還算學(xué)到了一些東西順便練習(xí)了下英語帅戒。
在我自己的vue項目里面幾乎只在plugins里面有一句new webpack.HotModuleReplacementPlugin()而看不到一些很細節(jié)的東西灯帮，真方便。
