>[danger]webpack和vite相比，vite有哪些優勢？ **1、基于ESM的Dev server** 在`Vite`出來之前，傳統的打包工具如`Webpack`是先解析依賴、打包構建再啟動開發服務器，`Dev Server` 必須等待所有模塊構建完成，當我們修改了 `bundle`模塊中的一個子模塊， 整個 `bundle` 文件都會重新打包然后輸出。項目應用越大，啟動時間越長。 而`Vite`利用瀏覽器對`ESM`的支持，當 `import` 模塊時，瀏覽器就會下載被導入的模塊。先啟動開發服務器，當代碼執行到模塊加載時再請求對應模塊的文件,本質上實現了動態加載。灰色部分是暫時沒有用到的路由，所有這部分不會參與構建過程。隨著項目里的應用越來越多，增加`route`，也不會影響其構建速度。 **2、基于ESM 的 HMR 熱更新** 目前所有的打包工具實現熱更新的思路都大同小異：主要是通過`WebSocket`創建瀏覽器和服務器的通信監聽文件的改變，當文件被修改時，服務端發送消息通知客戶端修改相應的代碼，客戶端對應不同的文件進行不同的操作的更新。 `Webpack`: 重新編譯，請求變更后模塊的代碼，客戶端重新加載 `Vite`: 請求變更的模塊，再重新加載 `Vite` 通過 `chokidar` 來監聽文件系統的變更，只用對發生變更的模塊重新加載， 只需要精確的使相關模塊與其臨近的 `HMR`邊界連接失效即可，這樣`HMR` 更新速度就不會因為應用體積的增加而變慢而 `Webpack` 還要經歷一次打包構建。所以 `HMR` 場景下，`Vite` 表現也要好于 `Webpack`。 **3、基于esbuild的依賴預編譯優化** **4、基于 Rollup的 Plugins** 使用`Vite`插件可以擴展`Vite`能力，通過暴露一些構建打包過程的一些時機配合工具函數，讓用戶可以自定義地寫一些配置代碼，執行在打包過程中。比如解析用戶自定義的文件輸入，在打包代碼前轉譯代碼，或者查找。 **最后總結下`Vite`相關的優缺點：** * 優點： * 快速的冷啟動: 采用`No Bundle`和`esbuild`預構建，速度遠快于`Webpack` * 高效的熱更新：基于`ESM`實現，同時利用`HTTP`頭來加速整個頁面的重新加載，增加緩存策略 * 真正的按需加載: 基于瀏覽器`ESM`的支持，實現真正的按需加載 * 缺點 * 生態：目前`Vite`的生態不如`Webapck`，不過我覺得生態也只是時間上的問題。 * 生產環境由于`esbuild`對`css`和代碼分割不友好使用`Rollup`進行打包