【webpac篇】HMR熱加載

學習文章

HMR原理解析
HRM原理解析

思惟導圖

抓重點

服務端（啓動服務會創建一個server）

1. 配置了熱更新以後，會new HotModuleReplacementPlugin實例進入plugin裏
2. 使用wepack的watch鉤子監聽是否改變
3. 可是在devserver階段是不會直接改變依賴內容，須要使用memory-fs這個框架去存入內存中
4. 與客戶端創建websocket長鏈接
5. 當咱們的代碼內容改變以後，傳遞type:ok，在這以前會傳遞咱們保存進內存中的hash
6. 當接收到客戶端請求後，會將新的模塊添加到modules中，當下次調用webpack_require,獲取到的就是新模塊了。接着在緩存中刪除過時的模塊和依賴

客戶端（瀏覽器）

1. 植入runtime.js邏輯
2. 接收到ok後，調用runtime裏邏輯，hotDownloadManifast和hotDownloadUpdateChunk
3. ajax請求更新的文件，返回對應的文件信息
4. 經過jsonp請求最新的代碼模塊
5. 更新依賴文件，刪除舊的不存在的依賴文件

廢話

其實一個好的機制不單單在這個領域有所建樹，這種思惟咱們能夠擴展到多個方面，感謝大佬文章學習，去拜源碼去了。