| index | 項目 | Vite | Webpack |
| 1 | 原理 | 直接啟動開發伺服器後的打包，請求哪個模組才編譯 | 先打包，然後啟動開發伺服器，請求伺服器給予打包 |
| 2 | HMR(熱更新） | 改動模組 ，僅需讓柳覽器重新請求該模組 | 相關依賴全部編譯 |
| 3 | 優點 |
啟動快，做出來的網站google網站評分較高
按需動態編譯的方式，極大的縮減了編譯時間，專案越複雜、模組越多，Vite 的優勢越明顯。
內置支持 TypeScript / less / sass / stylus / postcss（需要單獨安裝所對應的編譯器）
|
生態龐大，遇到問題90% 網路上都有辦法解決。
支持vue-class-component
|
| 4 | 缺點 |
沒有webpack成熟，無法做到太細部的調整。
生態沒有webpack龐大，遇到問題90%需要自己解決（但現在有越來越好）
vite不支持vue-class-component
|
構建耗時、專案越大編譯速度越慢。
做出來的網站google網站評分較低
|
| 5 | 環境變數方面 |
Vite預設沒有process.env，必須另外設定。
它有專門的屬性import.meta
除了我們自行定義的環境變數，Vite 還有內建四個它設定的環境變數讓我們運用：
|