一、vite是什么
是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)。
由兩部分組成：
- 一個(gè)開(kāi)發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。
- 一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過(guò)的靜態(tài)資源。
官網(wǎng)：https://vitejs.cn/guide/#scaffolding-your-first-vite-project
二、共同點(diǎn)
都是構(gòu)建工具，用于資源打包
三、使用
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
注意： 需要 Node.js 版本 >= 12.0.0
四、啟動(dòng)方式
webpack原理
vite原理
由此可見(jiàn)：webpack是先打包再啟動(dòng)開(kāi)發(fā)服務(wù)器，vite是直接啟動(dòng)開(kāi)發(fā)服務(wù)器，然后按需編譯依賴(lài)文件，所以vite打包速度更快
五、差別
在HRM方面，當(dāng)某個(gè)模塊內(nèi)容改變時(shí)，vite讓瀏覽器去重新請(qǐng)求該模塊即可，而不是像webpack重新將該模塊的所有依賴(lài)重新編譯；
六、過(guò)程
1.Vite 是基于 esbuild 預(yù)構(gòu)建依賴(lài)的。當(dāng)聲明一個(gè)script標(biāo)簽類(lèi)型為module時(shí)，瀏覽器將對(duì)其內(nèi)部的import引用發(fā)起HTTP請(qǐng)求獲取模塊內(nèi)容；
2.Vite 劫持了這些請(qǐng)求，并在后端進(jìn)行相應(yīng)的處理（如處理.ts文件為.js文件），然后再返回給瀏覽器；
3.由于瀏覽器只會(huì)對(duì)用到的模塊發(fā)起 HTTP 請(qǐng)求，所以 Vite 沒(méi)必要對(duì)項(xiàng)目里所有的文件先打包后返回，而是只編譯瀏覽器發(fā)起 HTTP 請(qǐng)求的模塊即可。也就實(shí)現(xiàn)了所謂的按需加載。
七、總結(jié)
vite 主要對(duì)應(yīng)的場(chǎng)景是開(kāi)發(fā)模式，唯一的缺點(diǎn)是相關(guān)生態(tài)沒(méi)有webpack完善，vite可以作為開(kāi)發(fā)的輔助。
