開發(fā)階段vite的速度遠(yuǎn)快于webpack，主要是因?yàn)椋?br> webpack是先打包再啟動(dòng)開發(fā)服務(wù)器，vite是直接啟動(dòng)開發(fā)服務(wù)器，然后按需編譯依賴文件。

下面詳細(xì)來(lái)說(shuō)：

• webpack先打包，再啟動(dòng)開發(fā)服務(wù)器，請(qǐng)求服務(wù)器時(shí)直接給予打包后的結(jié)果；
• vite直接啟動(dòng)開發(fā)服務(wù)器，請(qǐng)求哪個(gè)模塊再對(duì)哪個(gè)模塊進(jìn)行實(shí)時(shí)編譯；
• 由于現(xiàn)代瀏覽器本身就支持ES Modules，會(huì)主動(dòng)發(fā)起請(qǐng)求去獲取所需文件。vite充分利用這點(diǎn)，將開發(fā)環(huán)境下的模塊文件，就作為瀏覽器要執(zhí)行的文件，而不是像webpack先打包，交給瀏覽器執(zhí)行的文件是打包后的；
• 由于vite啟動(dòng)的時(shí)候不需要打包，也就無(wú)需分析模塊依賴、編譯，所以啟動(dòng)速度非?？?。當(dāng)瀏覽器請(qǐng)求需要的模塊時(shí)，再對(duì)模塊進(jìn)行編譯，這種按需動(dòng)態(tài)編譯的模式，極大縮短了編譯時(shí)間，當(dāng)項(xiàng)目越大，文件越多時(shí)，vite的開發(fā)時(shí)優(yōu)勢(shì)越明顯；
• 在HRM方面，當(dāng)某個(gè)模塊內(nèi)容改變時(shí)，讓瀏覽器去重新請(qǐng)求該模塊即可，而不是像webpack重新將該模塊的所有依賴重新編譯；
• 當(dāng)需要打包到生產(chǎn)環(huán)境時(shí)，vite使用傳統(tǒng)的rollup進(jìn)行打包，所以，vite的優(yōu)勢(shì)是體現(xiàn)在開發(fā)階段，另外，由于vite使用的是ES Module，所以代碼中不可以使用CommonJs；