React技術棧——HotModuleReplacement

william 發布于2019-08-19 18:43 / 3093人閱讀

摘要：如果檢測到文件變化，會重新構建被改變的文件。另外，被改變的模塊被發送到，用來做熱替換。首先檢查，被更新的模塊能否指是否被跟蹤詢問實例是否有更新。如果有更新，實例會異步下載更新代碼，并通知已經準備就緒。參考資料官方文檔官方同事的總結

Hot Module Replacement是webpack下實現熱刷新的模塊，由于webpack的坑爹文檔，看了很久才搞明白這東西怎么用。

Webapck的熱刷新用起來很爽，連續寫一個下午，一次刷新都不用，體驗棒棒噠。

實現熱刷新的主要是HOT MODULE REPLACEMENT（HMR）模塊

官方文檔很坑爹，反正我是看的懵懵懂懂的。官方wiki講的稍微好些，不過原理多一些

How does it works?

Webpacks adds a small HMR runtime to the bundle, during the build process, that runs inside your app. When the build completes, Webpack does not exit but stays active, watching the source files for changes. If Webpack detects a source file change, it rebuilds only the changed module(s). Depending on the settings, Webpack will either send a signal to the HMR runtime, or the HMR runtime will poll webpack for changes. Either way, the changed module is sent to the HMR runtime which then tries to apply the hot update. First it checks whether the updated module can self-accept. If not, it checks those modules that have required the updated module. If these too do not accept the update, it bubbles up another level, to the modules that required the modules that required the changed module. This bubbling-up will continue until either the update is accepted, or the app entry point is reached, in which case the hot update fails.

在構建時，webapck添加一個小的HMR實例到bundle內部，當構建完成后，webpack不再存在但保持監控源文件。如果webpack檢測到文件變化，會重新構建被改變的文件。根據設置，webpack要么發送一個信號給HMR實例，要么檢查webpack的變化。另外，被改變的模塊被發送到HMR runtime，用來做熱替換。首先檢查，被更新的模塊能否self-accept【指是否被HMR跟蹤】?

From the app view

The app code asks the HMR runtime to check for updates. The HMR runtime downloads the updates (async) and tells the app code that an update is available. The app code asks the HMR runtime to apply updates. The HMR runtime applies the update (sync). The app code may or may not require user interaction in this process (you decide).

app詢問HMR實例是否有更新。如果有更新，HMR實例會異步下載更新代碼，并通知app已經準備就緒。app源碼請求HMR實例開始更新。HMR實例同步更新。app可以選擇是否和用戶交互。

From the compiler(webpack) view

待續。。。

參考資料：

【1】官方文檔

【2】官方wiki

【3】同事的總結

云服務器 GPU云服務器技術棧全棧技術 js技術棧 HotModuleReplacement

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79910.html

Webpack HMR 原理解析

摘要：在過程中會利用簡稱中的兩個方法和。是通過請求最新的模塊代碼，然后將代碼返回給，會根據返回的新模塊代碼做進一步處理，可能是刷新頁面，也可能是對模塊進行熱更新。該方法返回的就是最新值對應的代碼塊。 Hot Module Replacement（簡稱 HMR) 包含以下內容：熱更新圖熱更新步驟講解 showImg(https://segmentfault.com/img/remote...

Ververica 2019-08-26 13:57 評論0 收藏0
React技術棧實現XXX點評App demo

摘要：項目的架構也是最近在各種探討研究。還求大神多指點項目技術總結技術棧項目結構探究初體驗關于項目中的配置說明項目簡單說明開發這一套，我個人的理解是體現的是代碼分層職責分離的編程思想邏輯與視圖嚴格區分。前端依舊使用技術棧完成。項目地址：https://github.com/Nealyang/R...技術棧：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 評論0 收藏0
你想要的全平臺全棧開源項目-Vue、React、小程序、安卓、ReactNative、java后端

摘要：無論你是前端后端移動端開發人員，或是設計師產品經理，都可以在平臺上發布項目，與志同道合的小伙伴一起協作完成項目。全平臺全棧開源項目 coderiver 今天終于開始前后端聯調了~ 首先感謝大家的支持，coderiver 在 GitHub 上開源兩周，獲得了 54 個 Star，9 個 Fork，5 個 Watch。這些鼓勵和認可也更加堅定了我繼續寫下去的決心~ 再次感謝各位大佬！ ...

Maxiye 2019-08-16 13:45 評論0 收藏0
使用react技術棧完全重寫一個vue書城項目

摘要：本項目是在之前一個項目基礎上，用技術棧重寫的一個書城項目版本地址本項目地址預覽地址項目說明本項目是一個構建的移動書城項目，數據是通過爬蟲爬取，存儲在中，項目通過構建，前端部分是技術棧。本項目是在之前一個vue項目基礎上，用react技術棧重寫的一個書城項目 vue版本地址本項目地址預覽地址項目說明本項目是一個react + nodejs + mysql構建的移動書城項目，...

aaron 2019-08-21 11:59 評論0 收藏0
[ 一起學React系列 -- 0 ] React技術棧學習路線

摘要：的出現真可謂是前端界的福音，正與之宗旨所說，。據統計，目前世界上有的項目使用了。技術棧學習路線直到前段時間筆者的朋友給推薦了一個，真是欣喜若狂也更加堅定了自己在繼續前進的想法。這是一個外國友人總結的一套技術棧學習路線，先給傳送門。我相信點進來的同學都是沖著標題來的，當然本文也不會讓各位失望。不過在正式介紹標題所述的內容之前，我們不妨先放下技術，一起回顧下自己做前端技術的心路歷程。前...

Java3y 2019-08-26 12:16 評論0 收藏0