webpack與vite的對比

vite與webpack的打包原理：

vite: 基於遊覽器原生ES Module，利用遊覽器解析import，服務器端按需編譯返回

webpack: 逐級遞歸識別依賴，構建依賴圖譜->轉化AST語法樹->處理代碼->轉換為遊覽器可識別的代碼

vite相比webpack的優勢：

開發環境中，無需打包操作，可快速冷啟動：

由於vite啟動的時候不需要打包，也就無需分析模塊依賴、編譯代碼；

從底層原理上來說，vite是基於esbuild預構建依賴，而esbuild是採用go語言編寫，go語言的操作是納秒級別的

webpack是原生js編寫的，js是以毫秒計數的，所以vite比webpack啟動快很多；

真正的按需編譯，不再等待整個應用完成：

webpack: vite:

當遊覽器請求需要的模塊時，再對模塊進行編譯，這種按需動態編譯的模式，極大程度縮短了編譯時間，當項目越大，文件越多時，vite的開發優勢就越明顯

輕量快速的熱重載（HMR）：

vite在HMR方面，當某個模塊內容改變時，讓遊覽器重新請求該模塊即可，而不用像webpack那樣重新將該模塊的所有依賴重新編譯

vite相比webpack的劣勢：

生態不及webpack、加載器、插件不夠豐富

生產環境esbuild構建對於css和代碼分割不夠友好

項目開發遊覽要支持ES Module，不能識別CommonJS語法

參考：

//blog.csdn.net/huangpb123/article/details/123313589

//blog.51cto.com/xuedingmaojun/2967713?ivk_sa=1024320u

//www.knowbaike.com/it/13131.html