React技術(shù)棧——HotModuleReplacement

william 發(fā)布于2019-08-19 18:43 / 3089人閱讀

摘要：如果檢測(cè)到文件變化，會(huì)重新構(gòu)建被改變的文件。另外，被改變的模塊被發(fā)送到，用來(lái)做熱替換。首先檢查，被更新的模塊能否指是否被跟蹤詢問(wèn)實(shí)例是否有更新。如果有更新，實(shí)例會(huì)異步下載更新代碼，并通知已經(jīng)準(zhǔn)備就緒。參考資料官方文檔官方同事的總結(jié)

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

Webapck的熱刷新用起來(lái)很爽，連續(xù)寫(xiě)一個(gè)下午，一次刷新都不用，體驗(yàn)棒棒噠。

實(shí)現(xiàn)熱刷新的主要是HOT MODULE REPLACEMENT（HMR）模塊

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

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.

在構(gòu)建時(shí)，webapck添加一個(gè)小的HMR實(shí)例到bundle內(nèi)部，當(dāng)構(gòu)建完成后，webpack不再存在但保持監(jiān)控源文件。如果webpack檢測(cè)到文件變化，會(huì)重新構(gòu)建被改變的文件。根據(jù)設(shè)置，webpack要么發(fā)送一個(gè)信號(hào)給HMR實(shí)例，要么檢查webpack的變化。另外，被改變的模塊被發(fā)送到HMR runtime，用來(lái)做熱替換。首先檢查，被更新的模塊能否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詢問(wèn)HMR實(shí)例是否有更新。如果有更新，HMR實(shí)例會(huì)異步下載更新代碼，并通知app已經(jīng)準(zhǔn)備就緒。app源碼請(qǐng)求HMR實(shí)例開(kāi)始更新。HMR實(shí)例同步更新。app可以選擇是否和用戶交互。

From the compiler(webpack) view

待續(xù)。。。

參考資料：

【1】官方文檔

【2】官方wiki

【3】同事的總結(jié)