# Vite 的 HMR 機制

> 這是在 Vue.js Taiwan 社群小聚分享的主題「你是 Live Reload，我是 H...

Published: 2023-10-26
URL: https://kaochenlong.com/hmr-in-vite

---

這是在 Vue.js Taiwan 社群小聚分享的主題「你是 Live Reload，我是 Hot Reload，我們不一樣！」，用一個簡單的 Vanilla JS 專案示範平常在用的 Live Server 所提供的頁面自動重新整理，跟 Vite 裡面的 HMR（Hot Module Replacement）有什麼不同，希望對大家有些幫助。

但我必須老實說，今天這個主題是我在今年 LaravelxVue Conf 研討會上講錯的內容，當時我以為我看到的是 HMR，但後來細追原始碼才發現原來不是這麼一回事。

&lt;figure class=&quot;youtube-video&quot; data-id=&quot;sjkccWiSErI&quot; data-size=&quot;75&quot; data-caption=&quot;https://www.youtube.com/watch?v=sjkccWiSErI&quot;&gt;
&lt;/figure&gt;

想要跟著影片自己動手做看看的話，可以到我的 GitHub 取得檔案

Repo：https://github.com/kaochenlong/vite-hmr-demo

場地錄影畫質只有 1080p 所以可能有些程式碼不一定會那麼清楚 :)

想要了解更多關於 Vite 的原始碼或運作原理的話，可參考[Vite 原始碼解讀](https://kaochenlong.com/2023/10/16/vite-source-code.html)的介紹。