Vite 的 HMR 機制
![Vite 的 HMR 機制](/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBbElEIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--a6ba1d26687492e74e020569efd2c88883b407df/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBPZ2wzWldKd09oTnlaWE5wZW1WZmRHOWZabWxzYkZzSGFRSUFCV2tDd0FFPSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--130983f3b85ad7b3bb5bc34bcb62063cbbe6683b/page-reload.jpg)
這是在 Vue.js Taiwan 社群小聚分享的主題「你是 Live Reload,我是 Hot Reload,我們不一樣!」,用一個簡單的 Vanilla JS 專案示範平常在用的 Live Server 所提供的頁面自動重新整理,跟 Vite 裡面的 HMR(Hot Module Replacement)有什麼不同,希望對大家有些幫助。
但我必須老實說,今天這個主題是我在今年 LaravelxVue Conf 研討會上講錯的內容,當時我以為我看到的是 HMR,但後來細追原始碼才發現原來不是這麼一回事。
想要跟著影片自己動手做看看的話,可以到我的 GitHub 取得檔案
Repo:https://github.com/kaochenlong/vite-hmr-demo
場地錄影畫質只有 1080p 所以可能有些程式碼不一定會那麼清楚 :)
想要了解更多關於 Vite 的原始碼或運作原理的話,可參考Vite 原始碼解讀的介紹。