Vite是一個基于ESM的構(gòu)建工具慌申，它的熱更新原理是通過WebSocket實現(xiàn)的。在開發(fā)過程中睡汹，我們經(jīng)常需要修改代碼肴甸，然后重新編譯，這個過程非常耗時囚巴，而且會中斷我們的開發(fā)節(jié)奏原在。Vite的熱更新原理可以讓我們在修改代碼后友扰，無需重新編譯，就可以立即看到修改后的效果庶柿，從而提高開發(fā)效率村怪。
Vite的熱更新原理是基于瀏覽器的WebSocket協(xié)議實現(xiàn)的。WebSocket是一種全雙工通信協(xié)議浮庐，它可以在瀏覽器和服務(wù)器之間建立一個持久的連接甚负，實現(xiàn)實時通信。在Vite中审残，當我們修改了代碼后梭域，Vite會通過WebSocket將修改的代碼發(fā)送給瀏覽器，然后瀏覽器會立即更新頁面搅轿，從而實現(xiàn)熱更新病涨。
具體來說，Vite的熱更新原理分為兩個部分：服務(wù)器端和客戶端璧坟。服務(wù)器端負責監(jiān)聽文件變化既穆，客戶端負責接收文件變化并更新頁面。
Vite 熱更新的主要流程
熱更新的英文全稱為Hot Module Replacement雀鹃，簡寫為 HMR循衰。當修改代碼時，HMR 能夠在不刷新頁面的情況下褐澎，把頁面中發(fā)生變化的模塊会钝，替換成新的模塊，同時不影響其他模塊的正常運作工三。
vite server：指 vite 在開發(fā)時啟動的 server
? vite client：vite dev server 會在index.html中迁酸，注入路徑為@vite/client的腳本，這個腳本是運行在瀏覽器的
1. 修改代碼俭正，vite server 監(jiān)聽到代碼被修改
2. vite 計算出熱更新的邊界（即受到影響奸鬓，需要進行更新的模塊）
3. vite server 通過 websocket 告訴 vite client 需要進行熱更新
4. 瀏覽器拉取修改后的模塊
5. 執(zhí)行熱更新的代碼
